微信小程序?qū)崿F(xiàn)簡易table表格的方法

發(fā)布時間：2020-06-23 09:43:29 來源：億速云閱讀：4025 作者：清晨欄目：web開發(fā)

不懂微信小程序?qū)崿F(xiàn)簡易table表格的方法？其實想解決這個問題也不難，下面讓小編帶著大家一起學(xué)習(xí)怎么去解決，希望大家閱讀完這篇文章后大所收獲。

由于需要開發(fā)小程序，前端又是自己弄，類似table的標(biāo)簽也沒有，后來看到小程序文檔中推薦使用flex布局，就把css中的flex布局學(xué)了一遍，效果還行，大家將就看一下

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') 
 }

})

效果圖如下

微信小程序?qū)崿F(xiàn)簡易table表格的方法

其實這也是很簡單flex布局，更復(fù)雜的布局就交給大家了

感謝大家能夠認(rèn)真閱讀完這篇文章，希望小編分享微信小程序?qū)崿F(xiàn)簡易table表格的方法內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

微信小程序?qū)崿F(xiàn)簡易table表格的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽