微信小程序實現簡易table表格

2019-11-19 12:08:40

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了微信小程序實現簡易表格的具體代碼，供大家參考，具體內容如下

由于需要開發小程序，前端又是自己弄，類似table的標簽也沒有，后來看到小程序文檔中推薦使用flex布局，就把css中的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')  }})

效果圖如下