微信小程序实现简易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 全角转换实现代码
Jul 17 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
vue获取验证码倒计时组件
Aug 26 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之sphinx
2013/05/15 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
详解Python中的type()方法的使用
2015/05/21 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
详解python中的装饰器
2018/07/10 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
教育学专业毕业生的自我评价
2013/11/21 职场文书
遗产继承公证书
2014/04/09 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
Redis基本数据类型Set常用操作命令
2022/06/01 Redis