android微信小程序自动填表_微信小程序实现简易table表格

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

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

table.wxml

head1

head2

head3

{{item.code}}

{{item.text}}

{{item.type}}

{{item.code}}

{{item.text}}

{{item.type}}

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布局，更复杂的布局就交给大家了

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

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