扣丁学堂HTML5培训之微信小程序实现绘制table表格功能示例

2019-04-26 14:30:04 2438浏览

今天扣丁学堂HTML5培训老师给大家分享一篇关于微信小程序实现绘制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

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

以上就是关于扣丁学堂HTML5培训之微信小程序实现绘制table表格功能示例的全部内容，希望本文所述对大家微信小程序开发有所帮助，想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：673883249。

                            

     【关注微信公众号获取更多学习资料】        【扫码进入HTML5前端开发VIP免费公开课】  

查看更多关于“HTML5开发技术资讯”的相关文章>>