微信小程序?qū)崿F(xiàn)簡單表格
更新時(shí)間:2019年02月14日 14:44:12 作者:祈澈菇?jīng)?
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)簡單表格,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xià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') } })
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript 函數(shù)及作用域總結(jié)介紹
本文是對javascript在的函數(shù)及作用域進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11js+css實(shí)現(xiàn)文字散開重組動畫特效代碼分享
這篇文章主要介紹了js+css實(shí)現(xiàn)文字散開重組動畫特效,需要的朋友可以參考下2015-08-08一文詳解JS中的Map、Set、WeakMap和WeakSet
在JavaScript中,Map、Set、WeakMap和WeakSet是四個(gè)不同的數(shù)據(jù)結(jié)構(gòu),它們都有不同的特點(diǎn)和用途,本文詳細(xì)介紹了Map、Set、WeakMap和WeakSet的用法及區(qū)別,需要的朋友可以參考下2023-04-04Js為表單動態(tài)添加節(jié)點(diǎn)內(nèi)容的方法
這篇文章主要介紹了Js為表單動態(tài)添加節(jié)點(diǎn)內(nèi)容的方法,實(shí)例分析了js針對表單節(jié)點(diǎn)進(jìn)行添加操作的常用技巧,需要的朋友可以參考下2015-02-02javascript寫的簡單的計(jì)算器,內(nèi)容很多,方法實(shí)用,推薦
最近用javascript寫了一個(gè)簡單的計(jì)算器,自己測試感覺還好,代碼都給了注釋,非常不錯(cuò),推薦大家學(xué)習(xí)。2011-12-12基于jquery插件實(shí)現(xiàn)常見的幻燈片效果
使用幻燈片效果的網(wǎng)站目前很普遍,本以為很復(fù)雜,實(shí)現(xiàn)起來卻發(fā)現(xiàn)很簡單,現(xiàn)成的jquery插件jquery.KinSlideshow.js便可實(shí)現(xiàn)幻燈片效果2013-11-11