微信小程序实现简单表格


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 相关文章推荐
js 遍历对象的属性的代码
Dec 29 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
jQuery知识点整理
Jan 30 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 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
从javascript语言本身谈项目实战
2006/12/27 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
详解python播放音频的三种方法
2019/09/23 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
Melissa香港官网:MDreams
2016/07/01 全球购物
秋季运动会表扬稿
2014/01/16 职场文书
主管会计岗位职责
2014/03/13 职场文书
合伙经营协议书
2014/04/18 职场文书
森林病虫害防治方案
2014/06/02 职场文书
校园活动策划方案
2014/06/13 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
新员工入职欢迎词
2015/01/23 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
2016春节家属慰问信
2015/03/25 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
律师函格式范本
2015/05/27 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android