快捷導(dǎo)航

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

更新時間：2020年06月19日 16:27:16 作者：oys1341

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡易table表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)簡易表格的具體代碼，供大家參考，具體內(nèi)容如下

由于需要開發(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') 
 }

})

效果圖如下

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

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

訪問百度和谷歌網(wǎng)速測試的javascript代碼
訪問百度和谷歌網(wǎng)速測試的javascript代碼...
2007-08-08
JS實現(xiàn)PC手機端和嵌入式滑動拼圖驗證碼三種效果
這篇文章主要介紹了JS實現(xiàn)PC手機端和嵌入式滑動拼圖驗證碼三種效果,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-02-02
javascript實現(xiàn)判斷鼠標(biāo)的狀態(tài)
這篇文章主要介紹了javascript實現(xiàn)判斷鼠標(biāo)的狀態(tài)的相關(guān)代碼，十分簡單實用，有需要的小伙伴可以參考下。
2015-07-07
js substring從右邊獲取指定長度字符串(示例代碼)
本篇文章主要是對js substring從右邊獲取指定長度字符串的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
整理Javascript基礎(chǔ)語法學(xué)習(xí)筆記
整理Javascript基礎(chǔ)語法學(xué)習(xí)筆記，之前一系列的文章是跟我學(xué)習(xí)Javascript，本文就是進(jìn)一步學(xué)習(xí)javascript基礎(chǔ)語法，希望大家繼續(xù)關(guān)注
2015-11-11
使用javascript做的一個隨機點名程序
這篇文章主要介紹了使用javascript做的一個隨機點名程序，經(jīng)測試，效果相當(dāng)不錯,需要的朋友可以參考下
2014-02-02
關(guān)于javascript中this關(guān)鍵字(翻譯+自我理解)
在傳統(tǒng)面向?qū)ο笳Z言中，this關(guān)鍵字是個很乖的小孩，從不亂跑，該是誰的就是誰的?？墒窃贘avaScript中，我們發(fā)現(xiàn)它不那么乖，有時甚至把我們搞的暈頭轉(zhuǎn)向的。所以有必要對它稍微做個總結(jié)。
2010-10-10
javascript與jquery中的this關(guān)鍵字用法實例分析
這篇文章主要介紹了javascript與jquery中的this關(guān)鍵字用法,結(jié)合實例形式簡單分析了this關(guān)鍵字用于獲取當(dāng)前對象的使用技巧,非常簡單易懂,需要的朋友可以參考下
2015-12-12
JS中ESModule和commonjs介紹及使用區(qū)別
這篇文章主要介紹了JS中ESModule和commonjs介紹及使用區(qū)別,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下
2022-07-07
詳解JavaScript中的屬性和特性
本文對JavaScript中對象的本質(zhì)、對象與類的關(guān)系、對象與引用類型的關(guān)系;對象屬性如何進(jìn)行分類;屬性中特性進(jìn)行介紹。感興趣的朋友可以看下
2016-12-12