微信小程序实现的绘制table表格功能示例

本文实例讲述了微信小程序实现的绘制table表格功能。分享给大家供大家参考，具体如下：

表格的绘制

js

Page({
data:{
infeed:['"", "1周", "2周", "3周", "总计"],
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

  
  
   {{item}}
  
  
  
  
   {{endwise1}}
   {{tb1}}
   {{tb2}}
   {{tb3}}
   {{tb4}}
  
   
   {{endwise2}}
   {{tc1}}
   {{tc2}}
   {{tc3}}
   {{tc4}}
  
   
   {{endwise3}}
   {{td1}}
   {{td2}}
   {{td3}}
   {{td4}}
  
  

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;
}

希望本文所述对大家微信小程序开发有所帮助。