微信小程序实现简易table表格
2019-02-15 00:21
537 查看
本文实例为大家分享了微信小程序实现简易表格的具体代码,供大家参考,具体内容如下
由于需要开发小程序,前端又是自己弄,类似table的标签也没有,后来看到小程序文档中推荐使用flex布局,就把css中的flex布局学了一遍,效果还行,大家将就看一下
table.wxml
<view class="table"> <view class="tr bg-w"> <view class="th">head1</view> <view class="th">head2</view> <view class="th ">head3</view> </view> <block wx:for="{{listData}}" wx:key="{[code]}"> <view class="tr bg-g" wx:if="{{index % 2 == 0}}"> <view class="td">{{item.code}}</view> <view class="td">{{item.text}}</view> <view class="td">{{item.type}}</view> </view> <view class="tr" wx:else> <view class="td">{{item.code}}</view> <view class="td">{{item.text}}</view> <view class="td">{{item.type}}</view> </view> </block> </view>
table.wxss
.table { border: 0px solid darkgray; } .tr { display: flex; width: 100%; justify-content: center; height: 3rem; align-items: center; } .td { width:40%; justify-content: center; text-align: center; } .bg-w{ background: snow; } .bg-g{ background: #E6F3F9; } .th { width: 40%; justify-content: center; background: #3366FF; color: #fff; display: flex; height: 3rem; align-items: center; }
table.js
Page({ data: { listData:[ {"code":"01","text":"text1","type":"type1"}, {"code":"02","text":"text2","type":"type2"}, {"code":"03","text":"text3","type":"type3"}, {"code":"04","text":"text4","type":"type4"}, {"code":"05","text":"text5","type":"type5"}, {"code":"06","text":"text6","type":"type6"}, {"code":"07","text":"text7","type":"type7"} ] }, onLoad: function () { console.log('onLoad') } })
效果图如下
其实这也是很简单flex布局,更复杂的布局就交给大家了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 微信小程序----简易table表格
- 微信小程序简易table组件实现
- 【微信小程序遇到的坑】实现跨行跨列的表格
- 微信小程序 | 多个按钮或VIEW,点击改变状态 简易的实现方法
- 微信小程序实现横向增长表格的方法
- 微信小程序实现一个可以编辑单元格的表格
- 微信小程序实现简易版tab切换效果
- 一秒学会微信小程序制作table表格
- Flex 实现表格布局 (微信小程序)
- 微信小程序之获取后台动态数据表格布局display:table
- 百度翻译api 实现简易微信翻译小程序
- 微信小程序实现图片上传功能
- 微信小程序实现带刻度尺滑块
- 微信小程序自定义多选事件的实现代码
- 开发微信小程序(3)-全局配置app.json及底部导航栏实现
- 微信小程序--实现swiper切换
- 微信小程序实战(二)---实现搜索页面
- 微信小程序实现红包雨功能
- 微信小程序如何实现底部导航栏
- 微信小程序 tabs选项卡效果的实现