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


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 相关文章推荐
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 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
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
ExtJS 入门
2010/10/29 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
跟老齐学Python之Python文档
2014/10/10 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
python的flask框架难学吗
2020/07/31 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
中间件的定义
2016/08/09 面试题
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
小饰品店的创业计划书范文
2013/12/28 职场文书
社区助残日活动总结
2014/08/29 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书