微信小程序实现的绘制table表格功能示例_微信小程序table合并单元格 - CSDN文库

5星 · 超过95%的资源 55 浏览量更新于2023-05-04 评论收藏 25KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

微信小程序实现的绘制微信小程序实现的绘制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

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

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论10

Asama浅间

2023-06-17

不得不说，这个表格功能真是一个神器。

weixin_38543280

粉丝: 3
资源: 975

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈