微信小程序实现简易桌子表格

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

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

table.wxml

视图类='table '视图类='tr bg-w '视图类=' th '头1/视图类=' th '头2/视图类=' th '头3/视图/视图块wx :为=' { { listData } } ' wx :键=' {[代码]} '视图类=' tr BG-g ' wx : if=' { { index % 2==0 } } '视图类=' TD ' { item。代码} }/视图类。表格{ border: 0px实心深灰色；}.tr { display: flex宽度： 100%;正义-内容：中心；高度： 3毫米项目：居中；}.TD {宽度：40%；正义-内容：中心；文本对齐：中心；}.bg-w{背景：雪；}.BG-g {后台： # e6f3f 9；}.th { width : 40%；正义-内容：中心；背景# 3366 ffcolor : # fffdisplay : flexheight : 3r align-items :居中；}table.js

page({ data : { listdata :[{ ' code ' : ' 01 '，' text':'text1 '，' type':'type1'}，{'code':'02 '，' text':'text2 '，' type':'type2'}，{'code':'03 '，' text':'text3 '，' type ' : ' type3 '效果图如下

其实这也是很简单弯曲布局，更复杂的布局就交给大家了

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