好资源导航 » 文章资讯 » 微信小程序实现的绘制table表格功能示例

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

2023-08-24 04:30:06 75

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

表格的绘制

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:1pxsolid#ebc450;
margin:20rpx0;
border-left:1pxsolid#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:1pxsolid#c9c9c9;
border-right:1pxsolid#c9c9c9;
}
.by-c{
background:snow;
}
.by-w{
background:#e6f3f9;
}
.a-y{
background:#ffecb5;
border-bottom:1pxsolid#edd079;
border-right:1pxsolid#edd079;
}
.dd{
width:40%;
border-bottom:1pxsolid#edd079;
border-right:1pxsolid#edd079;
justify-content:center;
background:#ffecb5;
color:#333;
display:flex;
height:90rpx;
align-items:center;
}

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐