微信小程序实现简易table表格


Posted in Javascript onJune 19, 2020

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

由于需要开发小程序,前端又是自己弄,类似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') 
 }

})

效果图如下

微信小程序实现简易table表格

其实这也是很简单flex布局,更复杂的布局就交给大家了

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
node.js基础知识小结
Feb 26 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
微信小程序制作表格的方法
Feb 14 #Javascript
手把手带你封装一个vue component第三方库
Feb 14 #Javascript
微信小程序实现简单表格
Feb 14 #Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 #Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 #jQuery
vue中各种通信传值方式总结
Feb 14 #Javascript
微信小程序实现banner图轮播效果
Jun 28 #Javascript
You might like
php 操作符与控制结构
2012/03/07 PHP
jquery中ajax学习笔记3
2011/10/16 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
python访问系统环境变量的方法
2015/04/29 Python
Python高级用法总结
2018/05/26 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
使用python实现滑动验证码功能
2019/08/05 Python
Python itertools.product方法代码实例
2020/03/27 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
高二学生评语大全
2014/04/25 职场文书
公司外出活动方案
2014/08/14 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
常用的Python代码调试工具总结
2021/06/23 Python