快捷導(dǎo)航

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

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

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

本文實例為大家分享了微信小程序?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)文章

TypeScript 類class與修飾符的詳細使用教程
通過 class 關(guān)鍵字定義一個類，然后通過 new 關(guān)鍵字可以方便的生產(chǎn)一個類的實例對象，這個生產(chǎn)對象的過程叫實例化，類的成員就是類中所有的屬性和方法，這篇文章主要介紹了TypeScript 類class與修飾符的詳細使用,需要的朋友可以參考下
2022-06-06
JS?連接MQTT的使用方法
這篇文章主要介紹了JS?連接MQTT的使用方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-01-01
微信小程序騰訊地圖SDK 獲取當(dāng)前地址實現(xiàn)解析
這篇文章主要介紹了微信小程序騰訊地圖SDK 獲取當(dāng)前地址實現(xiàn)解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-08-08
通過JS自動隱藏手機瀏覽器的地址欄實現(xiàn)原理與代碼
大家通過手機自帶瀏覽器打開百度、淘寶，在首頁加載完畢后，會自動隱藏頁面上方的地址欄,感興趣的朋友可以參考下
2013-01-01
JavaScript實現(xiàn)酷炫的鼠標(biāo)拖尾特效
這篇文章主要為大家介紹了通過JavaScript實現(xiàn)的一個超級好看的鼠標(biāo)拖尾特效，文中的示例代碼講解詳細，對我們學(xué)習(xí)JavaScript有一定的幫助，感興趣的可以學(xué)習(xí)一下
2021-12-12
JavaScript學(xué)習(xí)教程之cookie與webstorage
這篇文章主要給大家介紹了關(guān)于JavaScript學(xué)習(xí)教程之cookie與webstorage的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
TypeScript類型使用示例剖析
這篇文章主要為大家介紹了TypeScript類型使用示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
淺析$.getJSON異步請求和同步請求
下面小編就為大家?guī)硪黄獪\析$.getJSON異步請求和同步請求。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
微信小程序開發(fā)app.json全局配置實戰(zhàn)指南
app.json文件是小程序的全局配置文件,下面這篇文章主要給大家介紹了關(guān)于微信小程序開發(fā)app.json全局配置的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-05-05
javascript firefox 自動加載iframe 自動調(diào)整高寬示例
iframe 自動獲取onload高寬以及iframe 自動加載，具體實現(xiàn)如下，感興趣的朋友可以參考下
2013-08-08