抽奖小程序在线_微信小程序完成简易table表格

摘要: 手机微信微信小程序完成简单table报表 本文关键为大伙儿详尽详细介绍了手机微信微信小程序完成简单table报表,原文中实例编码详细介绍的十分详尽,具备一定的参照使用价值,...

微信小程序实现简易table表格       这篇文章主要为大家详细介绍了微信小程序实现简易table表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

由于需要开发小程序,前端又是自己弄,类似table的标签也没有,后来看到小程序文档中推荐使用flex布局,就把css中的flex布局学了一遍,效果还行,大家将就看一下

table.wxml

 view 
 view 
 view head1 /view 
 view head2 /view 
 view head3 /view 
 /view 
 block wx:for="{{listData}}" wx:key="{[code]}" 
 view wx:if="{{index % 2 == 0}}" 
 view {{item.code}} /view 
 view {{item.text}} /view 
 view {{item.type}} /view 
 /view 
 view wx:else 
 view {{item.code}} /view 
 view {{item.text}} /view 
 view {{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布局,更复杂的布局就交给大家了

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

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




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503