微信小程序实现横向增长表格的方法


            效果图如下所示：

  

下面给大家分享微信小程序横向增长表格的实例代码，代码如下所示：





<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

}]

 },



总结

以上所述是小编给大家介绍的微信小程序实现横向增长表格的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！