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


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 相关文章推荐
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 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格式化json函数示例代码
2016/05/12 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
JS自动适应的图片弹窗实例
2013/06/29 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
python判断正负数方式
2020/06/03 Python
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
Java如何调用外部Exe程序
2015/07/04 面试题
农行实习自我鉴定
2013/09/22 职场文书
法学个人求职信范文
2014/01/27 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
工程质量承诺书范文
2014/03/27 职场文书
食品安全处置方案
2014/06/14 职场文书
区域经理岗位职责
2015/02/02 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
不同意离婚代理词
2015/05/23 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers