脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序横向增长表格

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

 更新时间：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
}]
 },

总结

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

您可能感兴趣的文章:

相关文章

  • 微信小程序实现点餐小程序左侧滑动菜单

    微信小程序实现点餐小程序左侧滑动菜单

    这篇文章主要为大家详细介绍了微信小程序实现点餐小程序左侧滑动菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 详解uniapp的全局变量实现方式

    详解uniapp的全局变量实现方式

    这篇文章主要介绍了详解uniapp的全局变量实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 微信小程序页面生命周期详解

    微信小程序页面生命周期详解

    这篇文章主要为大家详细介绍了微信小程序页面生命周期的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-01-01
  • layui字体图标 loading图标静止不旋转的解决方法

    layui字体图标 loading图标静止不旋转的解决方法

    今天小编就为大家分享一篇layui字体图标 loading图标静止不旋转的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript函数参数的传递方式详解

    JavaScript函数参数的传递方式详解

    本文主要介绍了JavaScript函数参数的传递方式，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 用JS得到字符串中出现次数最多的字母

    用JS得到字符串中出现次数最多的字母

    一个字符串String=“adadfdfseffserfefsefseetsdg”，找出里面出现次数最多的字母和出现的次数。 经典的解答思路为：取出字符串的第一个字符（首字母），利用的字符串的 replace 方法将符合正则表达式（第一个字符）替代为空，此字母出现的次数为原始的字符串长度减去替代后的字符串长度。循环迭代找出长度最长的字母。
    2008-03-03
  • 深入了解JavaScript的逻辑运算符（与、或）

    深入了解JavaScript的逻辑运算符（与、或）

    本篇文章分享的是 JS 当中的逻辑运算符与、或，也就是 && 、 || ，没错，别看这简简单单的几个运算符，虽然这是最基础的知识，但其中隐藏的奥秘却十分耐人寻味，接下来本文就为大家一一揭开这简单的运算符背后的奇妙之处。
    2016-12-12
  • js+html5实现canvas绘制简单矩形的方法

    js+html5实现canvas绘制简单矩形的方法

    这篇文章主要介绍了js+html5实现canvas绘制简单矩形的方法,涉及html5图形绘制的基本技巧,需要的朋友可以参考下
    2015-06-06
  • 利用纯JS实现像素逐渐显示的方法示例

    利用纯JS实现像素逐渐显示的方法示例

    这篇文章主要给大家介绍了利用纯JS实现像素逐渐显示的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。
    2017-08-08
  • js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器

    js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器

    js实现鼠标拖动图片做了兼容IE，FF火狐，谷歌等主流浏览器，具体实现代码如下，感兴趣的朋友可以参考下哈，希望对你有所帮助
    2013-06-06

最新评论