微信小程序不支持 table 标签,在网上找到一个使用 flex 来实现表格的简明例子,记录一下。
table.wxml
-
<view class="table">
-
<view class="tr bg-w">
-
<view class="th">head1
</view>
-
<view class="th">head2
</view>
-
<view class="th ">head3
</view>
-
</view>
-
<block wx:for="{{listData}}" wx:key="{{code}}">
-
<view class="tr bg-g" wx:if="{{index % 2 == 0}}">
-
<view class="td">{{item.code}}
</view>
-
<view class="td">{{item.text}}
</view>
-
<view class="td">{{item.type}}
</view>
-
</view>
-
<view class="tr" wx:else>
-
<view class="td">{{item.code}}
</view>
-
<view class="td">{{item.text}}
</view>
-
<view class="td">{{item.type}}
</view>
-
</view>
-
</block>
-
</view>
table.wxss
.table { border: 0px solid darkgray; } .tr { display: flex; width: 100%; justify-content: center; height: 3rem; align-items: center; } .td { width:40%; justify-content: center; text-align: center; } .bg-w{ background: snow; } .bg-g{ background: #E6F3F9; } .th { width: 40%; justify-content: center; background: #3366FF; color: #fff; display: flex; height: 3rem; align-items: center; }
table.js
Page({ data: { listData:[ {"code":"01","text":"text1","type":"type1"}, {"code":"02","text":"text2","type":"type2"}, {"code":"03","text":"text3","type":"type3"}, {"code":"04","text":"text4","type":"type4"}, {"code":"05","text":"text5","type":"type5"}, {"code":"06","text":"text6","type":"type6"}, {"code":"07","text":"text7","type":"type7"} ] }, onLoad: function () { console.log('onLoad') } })
效果图
原文地址: https://blog.csdn.net/MoDingXiao/article/details/54694730