效果图如下所示:

下面给大家分享微信小程序横向增长表格的实例代码,代码如下所示:
<view class='table'>
<view class='tr'>
<view class='td' wx:for='{{array}}'>{{item.day}}</view>
</view>
<view class='tr'>
<view class='td' wx:for='{{array}}'>{{item.number}}</view>
</view>
</view>
.table {
font-size: 24rpx;
margin-top: 50rpx;
border: 1rpx solid #dadada;
}
.tr {
width: 100%;
display: flex;
justify-content: space-between;
}
.td {
padding: 10rpx;
border-bottom: 1rpx solid #dadada;
border-right: 1rpx solid #dadada;
text-align: center;
width: 100%;
}
Page({
/**
* 页面的初始数据
*/
data: {
array: [{
day: '7-24',
number: 4
},
{
day: '7-23',
number: 32
},
{
day: '7-22',
number: 32
},
{
day: '7-21',
number: 25
},
{
day: '7-20',
number: 32
},
{
day: '7-19',
number: 33
},
{
day: '7-18',
number: 33
}]
},
总结
以上所述是小编给大家介绍的微信小程序实现横向增长表格的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
继续阅读与本文标签相同的文章
上一篇 :
高通必须向竞争芯片制造商授权专利
下一篇 :
Vue三种常用传值示例(父传子、子传父、非父子)
-
2019阿里云双11 IoT分会场攻略
2026-05-16栏目: 教程
-
Knative 实战:如何在 Knative 中配置自定义域名及路由规则
2026-05-16栏目: 教程
-
带你读《HBase原理与实践》之三:HBase依赖服务
2026-05-16栏目: 教程
-
shell
2026-05-16栏目: 教程
-
阿里云项彬:云原生安全合规能力为云上企业数字化建设“提效降本”
2026-05-16栏目: 教程
