微信小程序表格布局实例操作

　　开发微信小程序就要掌握小程序的各种布局，比如小程序导航布局、小程序页面布局等等，今天小编给大家带来的教程是微信小程序表格布局，希望对大家有所帮助。

　　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') }})

　　效果图如下

　　由于需要开发小程序，类似table的标签也没有，所以就把css中的flex布局学了一遍，微信小程序表格布局效果还行。其实这也是很简单flex布局，更复杂的布局请关注微信小程序素材网。

　　微信小程序九宫格布局开发代码

　　微信小程序页面布局的方式有哪些

　　微信小程序导航布局技巧有哪些