微信小程序实现简易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 组件之旅(一)分析和设计
Oct 28 Javascript
用Juery网页选项卡实现代码
Jun 13 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
原生js生成图片验证码
Oct 11 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 strrpos()与strripos()函数
2013/08/31 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python使用循环实现批量创建文件夹示例
2014/03/25 Python
Python入门之modf()方法的使用
2015/05/15 Python
解析Python编程中的包结构
2015/10/25 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
深入理解Django中内置的用户认证
2017/10/06 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
python实现TCP文件传输
2020/03/20 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
我的中国梦演讲稿800字
2014/08/19 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
出纳岗位职责范本
2015/03/31 职场文书