微信小程序实现简单表格
2019-02-15 00:21
330 查看
本文实例为大家分享了微信小程序实现简单表格的具体代码,供大家参考,具体内容如下
效果图:
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') } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 微信小程序简单实现form表单获取输入数据功能示例
- 微信小程序实现简单定位功能
- 微信小程序实现简单input正则表达式验证功能示例
- 微信小程序 摇一摇抽奖简单实例实现代码
- 微信小程序与php 实现微信支付的简单实例
- 微信小程序 登录的简单实现
- 微信小程序 聊天室简单实现
- 微信小程序开发一swiper轮播图的简单实现
- [置顶] 微信小程序实现tabs选项卡效果简单代码实例
- Flex 实现表格布局 (微信小程序)
- 微信小程序实现简易table表格
- 微信小程序自定义toast的简单实现
- 微信小程序实现横向增长表格的方法
- 微信小程序实现一个可以编辑单元格的表格
- 【微信小程序遇到的坑】实现跨行跨列的表格
- 微信小程序 —— 瀑布流简单写法(css3属性加wx:if判断轻松实现)
- 微信小程序实现简单跑马灯效果
- 微信小程序自定义组件简单实现
- 微信小程序实现简单搜索功能含c#后台解析和部分代码
- 微信小程序实现非常简单的数字时钟