微信小程序实现简单表格


Posted in Javascript onFebruary 14, 2019

本文实例为大家分享了微信小程序实现简单表格的具体代码,供大家参考,具体内容如下

效果图:

微信小程序实现简单表格

wxml

<view class="table">
 <view class="tr bg-w">
  <view class="th">SPB</view>
  <view class="th">DPB</view>
  <view class="th ">日期</view>
 </view>
 <block wx:for="{{listData}}" wx:key="{[code]}">
  <view class="tr" wx:if="{{index % 2 == 0}}">
   <view class="td">{{item.code}}</view>
   <view class="td">{{item.text}}</view>
   <view class="td">{{item.date}}</view>
  </view>
  <view class="tr" wx:else>
   <view class="td">{{item.code}}</view>
   <view class="td">{{item.text}}</view>
   <view class="td">{{item.date}}</view>
  </view>
 </block>
</view>

wxss

.table {
 border: 0px solid darkgray;
 font-size: 12px;
}
.tr {
 display: flex;
 width: 100%;
 justify-content: center;
 height: 2rem;
 align-items: center;
}
.td {
  width:40%;
  justify-content: center;
  text-align: center;
}
.bg-w{
 background: snow;
}
 
.th {
 width: 40%;
 justify-content: center;
 background: #3366FF;
 color: #fff;
 display: flex;
 height: 2rem;
 align-items: center;
}

js

Page({
 data: {
  listData: [
   { "code": "120", "text": "70", "date": "2018年4月19日" },
   { "code": "125", "text": "74", "date": "2018年4月17日" },
  
   { "code": "119", "text": "76", "date": "2018年4月16日" },
   { "code": "117", "text": "78", "date": "2018年4月15日" }
  ]
 },
 onLoad: function () {
  console.log('onLoad')
 }
 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
vue-router传参用法详解
Jan 19 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
手挽手带你学React之React-router4.x的使用
Feb 14 #Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 #jQuery
vue中各种通信传值方式总结
Feb 14 #Javascript
微信小程序实现banner图轮播效果
Jun 28 #Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 #Javascript
JavaScript类型相关的常用操作总结
Feb 14 #Javascript
VuePress 快速踩坑小结
Feb 14 #Javascript
You might like
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
js有关元素内容操作小结
2011/12/20 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
使用axios实现上传图片进度条功能
2017/12/21 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
pyramid配置session的方法教程
2013/11/27 Python
在Python的Django框架中创建语言文件
2015/07/27 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
承办会议欢迎词
2014/01/17 职场文书
学习十八大报告感言
2014/02/04 职场文书
保护动物的标语
2014/06/11 职场文书
护士找工作求职信
2014/07/02 职场文书
一文搞懂Java中的注解和反射
2022/06/21 Java/Android