微信小程序实现简单表格


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 相关文章推荐
Jquery中Event对象属性小结
Feb 27 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
原生js实现放大镜
Feb 20 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
vue全屏事件开发详解
Jun 17 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
手挽手带你学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
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
航空大学应届生求职信
2013/11/10 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
风险评估实施方案
2014/03/09 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
销售助理岗位职责
2015/02/11 职场文书
Django框架中模型的用法
2022/06/10 Python
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript