微信小程序實現(xiàn)簡單表格
更新時間：2019年02月14日 14:44:12 作者：祈澈菇涼
這篇文章主要介紹了微信小程序實現(xiàn)簡單表格，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現(xiàn)簡單表格的具體代碼，供大家參考，具體內容如下
效果圖：
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')
}
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文是對javascript在的函數(shù)及作用域進行了詳細的總結介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了JS實現(xiàn)的簡單分頁功能,涉及javascript事件響應及頁面元素遍歷、動態(tài)構造等相關操作技巧,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了js+css實現(xiàn)文字散開重組動畫特效,需要的朋友可以參考下2015-08-08
一文詳解JS中的Map、Set、WeakMap和WeakSet
在JavaScript中，Map、Set、WeakMap和WeakSet是四個不同的數(shù)據(jù)結構，它們都有不同的特點和用途，本文詳細介紹了Map、Set、WeakMap和WeakSet的用法及區(qū)別，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Js為表單動態(tài)添加節(jié)點內容的方法,實例分析了js針對表單節(jié)點進行添加操作的常用技巧,需要的朋友可以參考下2015-02-02
javascript寫的簡單的計算器，內容很多，方法實用，推薦
最近用javascript寫了一個簡單的計算器，自己測試感覺還好,代碼都給了注釋，非常不錯，推薦大家學習。2011-12-12
靜態(tài)頁面的值傳遞(三部曲)...2006-09-09
用原生JS寫一個簡單的表單驗證功能，代碼分為html部分和js部分，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-03-03
使用幻燈片效果的網(wǎng)站目前很普遍，本以為很復雜，實現(xiàn)起來卻發(fā)現(xiàn)很簡單，現(xiàn)成的jquery插件jquery.KinSlideshow.js便可實現(xiàn)幻燈片效果2013-11-11
讀取excel文件是日常開發(fā)中經常會遇到的一個需求,下面這篇文章主要給大家介紹了關于js使用xlsx讀取excel文件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09