微信小程序?qū)崿F(xiàn)簡(jiǎn)單表格
更新時(shí)間：2019年02月14日 14:44:12 作者：祈澈菇?jīng)?
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單表格，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)簡(jiǎn)單表格的具體代碼，供大家參考，具體內(nèi)容如下
效果圖：
wxml
<view class="table">
<view class="tr bg-w">
<view class="th">SPB</view>
<view class="th">DPB</view>
<view class="th ">日期</view>
</view>
<block wx:for="{{listData}}" wx:key="{[code]}">
<view class="tr" wx:if="{{index % 2 == 0}}">
<view class="td">{{item.code}}</view>
<view class="td">{{item.text}}</view>
<view class="td">{{item.date}}</view>
</view>
<view class="tr" wx:else>
<view class="td">{{item.code}}</view>
<view class="td">{{item.text}}</view>
<view class="td">{{item.date}}</view>
</view>
</block>
</view>
wxss
.table {
border: 0px solid darkgray;
font-size: 12px;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 2rem;
align-items: center;
}
.td {
width:40%;
justify-content: center;
text-align: center;
}
.bg-w{
background: snow;
}
.th {
width: 40%;
justify-content: center;
background: #3366FF;
color: #fff;
display: flex;
height: 2rem;
align-items: center;
}
js
Page({
data: {
listData: [
{ "code": "120", "text": "70", "date": "2018年4月19日" },
{ "code": "125", "text": "74", "date": "2018年4月17日" },
{ "code": "119", "text": "76", "date": "2018年4月16日" },
{ "code": "117", "text": "78", "date": "2018年4月15日" }
]
},
onLoad: function () {
console.log('onLoad')
}
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)滑動(dòng)翻頁(yè)效果(完整代碼)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)滑動(dòng)翻頁(yè)效果，本文通過(guò)效果圖展示實(shí)例代碼講解的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
JavaScript中prompt()函數(shù)的用法實(shí)戰(zhàn)例子
JavaScript中的prompt是一個(gè)函數(shù),用于在瀏覽器中顯示一個(gè)對(duì)話框,提示用戶輸入一些信息,這篇文章主要給大家介紹了關(guān)于JavaScript中prompt()函數(shù)的用法實(shí)戰(zhàn),需要的朋友可以參考下2023-11-11
js函數(shù)名與form表單元素同名沖突的問(wèn)題
本篇文章主要是對(duì)js函數(shù)名與form表單元素同名沖突的問(wèn)題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
這篇文章主要介紹了Webpack的Loader和Plugin的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
細(xì)說(shuō)webpack源碼之compile流程-rules參數(shù)處理技巧(2)
這篇文章主要介紹了webpack源碼之compile流程-rules參數(shù)處理技巧的相關(guān)知識(shí)，需要的朋友參考下吧2017-12-12
uniapp微信小程序自定義導(dǎo)航欄的全過(guò)程
最近一直在學(xué)習(xí)uni-app開(kāi)發(fā)，由于uniapp是基于vue.js技術(shù)開(kāi)發(fā)的,所以下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序自定義導(dǎo)航欄的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Taro小程序自定義頂部導(dǎo)航欄功能的實(shí)現(xiàn)
這篇文章主要介紹了Taro小程序自定義頂部導(dǎo)航欄功能的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
js實(shí)現(xiàn)控制textarea輸入字符串的個(gè)數(shù),鼠標(biāo)按下抬起判斷輸入字符數(shù)
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)控制textarea輸入字符串的個(gè)數(shù),鼠標(biāo)按下抬起判斷輸入字符數(shù)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
js獲得當(dāng)前時(shí)區(qū)夏令時(shí)發(fā)生和終止的時(shí)間代碼
這篇文章主要介紹了js獲得當(dāng)前時(shí)區(qū)夏令時(shí)發(fā)生和終止的時(shí)間代碼,需要的朋友可以參考下2014-02-02
微信小程序使用ucharts在小程序中加入橫屏展示功能的全過(guò)程
這篇文章主要給大家介紹了關(guān)于微信小程序使用ucharts在小程序中加入橫屏展示功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09