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


Posted in Javascript onJuly 24, 2018

效果图如下所示:

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

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

<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 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
Vue事件修饰符native、self示例详解
Jul 09 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
vue中实现回车键登录功能
Feb 19 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 #Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 #Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 #Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 #Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 #Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 #Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 #Javascript
You might like
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
Python写的服务监控程序实例
2015/01/31 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
高中生学习生活的自我评价
2013/10/09 职场文书
销售自我评价
2013/10/22 职场文书
奥巴马演讲稿
2014/01/08 职场文书
超市开店计划书
2014/04/26 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
html实现弹窗的实例
2021/06/09 HTML / CSS
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python
pandas进行数据输入和输出的方法详解
2022/03/23 Python