欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

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

时间:2020-12-28 11:30:35|栏目:JavaScript代码|点击:

效果图如下所示:

 

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

<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实现一个简单的输入关键字添加标签效果实例

栏    目:JavaScript代码

下一篇:利用Javascript开发一个二维周视图日历

本文标题:微信小程序实现横向增长表格的方法

本文地址:http://www.codeinn.net/misctech/37477.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有