前提：微信小程式自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;
}
最終效果圖如下：
