前提：微信小程序自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;
}
最终效果图如下：
请发表评论