快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)的繪制table表格功能示例

更新時(shí)間：2019年04月26日 11:23:45 作者：weixin_41991473

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的繪制table表格功能,涉及微信小程序數(shù)據(jù)讀取及界面布局相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了微信小程序?qū)崿F(xiàn)的繪制table表格功能。分享給大家供大家參考，具體如下：

表格的繪制

js

Page({
data:{
infeed:['"", "1周", "2周", "3周", "總計(jì)"],
endwise1: "游泳",
tb1:"0",
tb2:"0",
tb3:"0",
tb4:"0",
endwise2: "跑步",
tc1:"0",
tc2:"0",
tc3:"0",
tc4:"0",
endwise3: "健身",
td1:"0",
td2:"0",
td3:"0",
td4:"0",
}
})

wxml

<view class="tle">
  <view class="ae by-c">
  <block wx:for="{{infeed}}" wx:key="*this">
   <view class="dd">{{item}}</view>
  </block>
  </view>
  <block >
  <view class="ae by-w " >
   <view class="wc a-y">{{endwise1}}</view>
   <view class="wc">{{tb1}}</view>
   <view class="wc">{{tb2}}</view>
   <view class="wc">{{tb3}}</view>
   <view class="wc">{{tb4}}</view>
  </view>
   <view class="ae by-w" >
   <view class="wc a-y">{{endwise2}}</view>
   <view class="wc">{{tc1}}</view>
   <view class="wc">{{tc2}}</view>
   <view class="wc">{{tc3}}</view>
   <view class="wc">{{tc4}}</view>
  </view>
   <view class="ae by-w" >
   <view class="wc a-yellow">{{endwise3}}</view>
   <view class="wc">{{td1}}</view>
   <view class="wc">{{td2}}</view>
   <view class="wc">{{td3}}</view>
   <view class="wc">{{td4}}</view>
  </view>
  </block>
</view>

wxss

.tle {
 border-top: 1px solid #ebc450;
 margin: 20rpx 0;
 border-left: 1px solid #c9c9c9;
}
.ae {
 display: flex;
 width: 100%;
 justify-content: center;
 align-items: center;
 text-align: center;
}
.wc {
 width: 40%;
 justify-content: center;
 text-align: center;
 height: 90rpx;
 line-height: 90rpx;
 border-bottom: 1px solid #c9c9c9;
 border-right: 1px solid #c9c9c9;
}
.by-c{
 background: snow;
}
.by-w {
 background: #e6f3f9;
}
.a-y {
 background: #ffecb5;
 border-bottom: 1px solid #edd079;
 border-right: 1px solid #edd079;
}
.dd {
 width: 40%;
 border-bottom: 1px solid #edd079;
 border-right: 1px solid #edd079;
 justify-content: center;
 background: #ffecb5;
 color: #333;
 display: flex;
 height: 90rpx;
 align-items: center;
}

希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。

您可能感興趣的文章:

相關(guān)文章

javascript獲取時(shí)間戳的5種方法詳解
這篇文章主要介紹了javascript獲取時(shí)間戳的5種方法詳解,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-03-03
js將圖片轉(zhuǎn)base64的兩種實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于js將圖片轉(zhuǎn)base64的兩種實(shí)現(xiàn)方法,Base64是網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)碼的編碼方式之一,Base64就是一種基于64個(gè)可打印字符來表示二進(jìn)制數(shù)據(jù)的方法,需要的朋友可以參考下
2023-07-07
js點(diǎn)擊更換背景顏色或圖片的實(shí)例代碼
這篇文章主要介紹了點(diǎn)擊更換背景顏色或圖片的js代碼，需要的朋友可以參考一下
2013-06-06
詳解適配器在JavaScript中的體現(xiàn)
在日常開發(fā)中，很多時(shí)候會(huì)不經(jīng)意間寫出符合某種設(shè)計(jì)模式的代碼，而適配器其實(shí)在JavaScript中應(yīng)該是比較常見的一種了。這篇文章主要介紹了適配器在JavaScript中的體現(xiàn) ,需要的朋友可以參考下
2018-09-09
判斷用戶是否在線的代碼
判斷用戶是否在線的代碼，需要的朋友可以參考下。
2011-03-03
使用JavaScript實(shí)現(xiàn)一個(gè)小程序之99乘法表
這篇文章主要介紹了使用JavaScript實(shí)現(xiàn)一個(gè)小程序之99乘法表的相關(guān)資料,需要的朋友可以參考下
2017-09-09
用原生js統(tǒng)計(jì)文本行數(shù)的簡(jiǎn)單示例
這篇文章我們來看看如何利用原生的JavaScript實(shí)現(xiàn)統(tǒng)計(jì)文本的行數(shù)，代碼實(shí)現(xiàn)起來很簡(jiǎn)單，有需要的可以參考借鑒。
2016-08-08
JavaScript實(shí)現(xiàn)購(gòu)物車案例
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)購(gòu)物車案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
火狐下table中創(chuàng)建form導(dǎo)致兩個(gè)table之間出現(xiàn)空白
js加入form導(dǎo)致兩個(gè)table之間出現(xiàn)空白，還有另一種說法在table中創(chuàng)建form表單是不符合DOM標(biāo)準(zhǔn)的，會(huì)導(dǎo)致post失效，以及js數(shù)據(jù)傳輸失效
2013-09-09
微信小程序?qū)崿F(xiàn)美團(tuán)菜單
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)美團(tuán)菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-06-06