test div index font tex con dir vue array

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

微信小程序簡易table組件實現