微信小程序实现横向增长表格的方法
更新时间：2018年07月24日 10:49:14 作者：reoak
这篇文章主要介绍了微信小程序实现横向增长表格的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
效果图如下所示：
下面给大家分享微信小程序横向增长表格的实例代码，代码如下所示：
<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
}]
},
总结
以上所述是小编给大家介绍的微信小程序实现横向增长表格的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了javascript打印html内容的小示例，大家参考使用2013-11-11
这篇文章主要介绍了javascript 的变量、作用域和内存问题的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要为大家详细介绍了js实现移动端吸顶效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
下面小编就为大家带来一篇javascript小数精度丢失的完美解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了Hammer.js+轮播原理实现简洁的滑屏功能的相关资料,需要的朋友可以参考下2016-02-02
新发现原来documenet.URL也可以实现页面跳转...2007-08-08
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
本文由脚本之家小编给大家分享的基于js判断手机号运行商是移动、联通、电信还是其他的，然后根据不同的运营商做出对应的处理，感兴趣的朋友一起学习吧2015-09-09
“DOM2级遍历和范围”模块定义了“范围”接口。通过范围可以选择文档中的一个区域，而不必考虑节点的界限（选择在后台完成，对用户是不可见的）。下面这篇文章主要介绍了Javascript中DOM范围的相关资料，需要的朋友可以参考下。2017-02-02
这篇文章主要介绍了js同源策略,较为详细的分析了javascript中同源策略的概念与相关应用注意事项,需要的朋友可以参考下2015-05-05
从零开始做一个pagination分页组件，这篇文章主要介绍了pagination分页组件的制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
最新评论