前提：微信小程序自1.6.3基础库版本库开始支持简洁组件，之前的版本因不支持，故在引用组件处默认为空节点。关于微信小程序已有模板为何还需构建组件？一是因为组件可以更方便的自定义并绑定行为，二是在其他页面引用时，无需通过import，只需在该页面json文件下配置usingComponents属性即可。（原本想在app.json文件里配置这个属性，从此一劳永逸，但目前貌似还不支持，至少我尝试的时候还不行-.-）

思路：主要是将table的head和tbody部分的数据抽象出来，使之只需要传值就可直接引用（如果用过react、vue等框架，微信小程序组件上手起来会更快，无非就是多了一丢丢配置而已）。

1、首先我们先来搭好table组件的页面布局：

<view class="table-outer-box">
<view class="table table-theme table-flex">
<view class="item" wx:for="{{tableThemes}}" wx:key="{{index}}">{{item}}</view>
</view>
<scroll-view class="scroll-view flex-column" scroll-y="true" bindscrolltolower="loadMore">
<view class="table table-item table-flex" wx:for="{{tableItems}}" wx:key="{{index}}">
<view class="item" wx:for="{{item}}" wx:key="{{index}}">{{item}}</view>
</view>
</scroll-view>
</view>
 

2、接着我们再来填充table样式：

.table-outer-box {
display: flex;
flex-direction: column;
padding: 50rpx 50rpx 0;
flex: 1;
}
.table {
height: 80rpx;
color: #fff;
line-height: 80rpx;
border-top: 1rpx solid #5f677a;
border-bottom: 1rpx solid #5f677a;
text-align: center;
}
.table-flex {
display: flex;
}
.table-theme {
font-size: 28rpx;
}
.table-item {
font-size: 24rpx;
opacity: 0.6;
}
.item {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
flex: 1;
}
.scroll-view {
flex: 1;
}
 
3、接下来，我们到组件json文件里设置component属性为true
{
"component": true
}
 
4、紧接着，我们到组件js里注册该组件：
Component({
properties: {
tableThemes: {
type: Object, // 因此处的thead是json格式，故将数据类型设置为object
// value: '' //默认值
},
tableItems: {
type: Array,
},
},
data: {
someData: {} // 暂未设置，跟其他页面的data属性和用法类似
},
methods: {
customMethod: function() {
// 暂为定义
}
}
});
 

5、然后，在要引用的test页面的json文件里添加usingComponents属性

{
"navigationBarTitleText": "table test",
"usingComponents": {
"table": "../../components/Table/index"
}
}
 
6、再然后，在要引用的test页面的wxml文件里直接用table标签引入：
<view class="container">
<view class="title">table component</view>
<table tableThemes="{{themeArr}}" tableItems="{{itemArr}}"></table>
</view>
 
7、最后，在test页面的js文件里赋值给tableThemes、tableItems属性（本栗因无api返回，故均采用默认数据）
Page({
data: {
themeArr: {nickName: '昵称', age: '年龄', tell: '电话', address: '住址'},
itemArr: [
{nickName: 'Anna', age: 25, tell: 121243423424, address: 'tianfuStreet'},
{nickName: 'Tina', age: 25, tell: 121243423424, address: 'tianfuStreet'},
{nickName: 'Tom', age: 25, tell: 121243423424, address: 'tianfuStreet'},
{nickName: 'Alex', age: 25, tell: 121243423424, address: 'tianfuStreet'},
{nickName: 'Hallen', age: 25, tell: 121243423424, address: 'tianfuStreet'},
{nickName: 'Lucy', age: 25, tell: 121243423424, address: 'tianfuStreet'},
]
},
onLoad() {
console.log('test is loaded');
}
});
 
test页面样式：
.container {
width: 100%;
height: 100%;
background: black;
}
 
.title {
font-size: 35rpx;
color: #fff;
text-align: center;
}
 
最终效果图如下：
 

最新文章

  1. 一起来玩echarts系列（一）------箱线图的分析与绘制
  2. Chrome开发者工具不完全指南：（三、性能篇）
  3. ContentObserver监听数据库&#183;变化
  4. iOS的设备及分辨率、图片命名
  5. ahjesus sql2005+游标示例
  6. nrf51822裸机教程-PWM
  7. windows7旗舰版激活密钥永久版免费分享
  8. 单片机(MCU)使用常用名字解释
  9. WPF DEV CellTemplateSelector(一个正确使用DevExpress CellTemplateSelector的Demo)
  10. Gradle学习笔记之Groovy
  11. nopCommerce 3.9 大波浪系列 之 引擎 NopEngine
  12. bzoj千题计划280：bzoj4592: [Shoi2015]脑洞治疗仪
  13. 巡风源码阅读与分析---Aider.py
  14. C++ 子类继承父类纯虚函数、虚函数和普通函数的区别
  15. 2019-04-05 Spring Boot学习记录
  16. Apex 单元测试辅助函数简介
  17. Oracle从入门到精通(详细) 明日科技
  18. 我的博客：C# PHP J2ee Java Android js WP Asp.net mvc Python
  19. mysql -- 索引补充
  20. 【leetcode】409. Longest Palindrome

热门文章

  1. swift是强类型语言
  2. 8、JVM--虚拟机字节码执行引擎
  3. Android Environment 获取各种路径的方法
  4. Java继承访问权限
  5. OpenCV——边缘检测（sobel算子、Laplacian算子、scharr滤波器）
  6. （转）LVS+Keepalived使用总结 vip丢失
  7. 开启路由转发 - route add -net 0.0.0.0 netmask 0.0.0.0 gateway 192.168.0.131 window tracert 追踪路由
  8. php web开发安全之sql注入和防范：（一）简单的select语句注入和防范
  9. kettle学习笔记（八）——kettle查询步骤与连接步骤
  10. Spring-data-jpa 学习笔记（二）