这篇文章主要为大家详细介绍了微信小程序实现简易桌子表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现简易表格的具体代码，供大家参考，具体内容如下
由于需要开发小程序，前端又是自己弄，类似桌子的标签也没有，后来看到小程序文档中推荐使用弯曲布局，就把钢性铸铁中的弯曲布局学了一遍，效果还行，大家将就看一下
table.wxml
视图class='table '
视图' tr bg-w '
view class='th'head1/view
view class='th'head2/view
视图标题3/视图
/查看
block wx:for=' { { list data } } ' wx:key=' {[code]} '
view class=' tr BG-g ' wx:if=' { { index % 2==0 } } '
视图class=' TD ' { { item。代码} }/查看
视图class=' TD ' { { item。text } }/查看
视图class=' TD ' { { item。type } }/视图
/查看
view class='tr' wx:else
视图class=' TD ' { { item。代码} }/查看
视图class=' TD ' { { item。text } }/查看
视图class=' TD ' { { item。type } }/视图
/查看
/阻止
/查看
table.wxss。表格{
边框：0px纯黑灰色；
}。tr {
显示器：flex
宽度：100%;
对齐-内容：居中；
身高：3雷姆；
对齐-项目：居中；
}。td {
宽度：40%;
对齐-内容：居中；
文本对齐：居中；
}。血糖-w{
背景：雪；
}。血糖-g{
背景：# E6F3F9
}。th {
宽度：40%;
对齐-内容：居中；
背景：# 3366FF
颜色：# fff
显示器：flex
身高：3雷姆；
对齐-项目：居中；
}
table.js
页面({
数据：{
列表数据：[
{ '代码':' 01 ','文本':'文本1 ','类型':'类型1'},
{ '代码':' 02 ','文本':'文本2 ','类型':'类型2'},
{ '代码':' 03 ','文本':'文本3 ','类型':'类型3'},
{ '代码':' 04 ','文本':'文本4 ','类型':'类型4'},
{ '代码':' 05 ','文本':'文本5 ','类型':'类型5'},
{ '代码':' 06 ','文本':'文本6 ','类型':'类型6'},
{'code':'07 '，' text':'text7 '，' type':'type7'}
]
},
onLoad: function () {
console.log('onLoad ')
}
})
效果图如下
其实这也是很简单弯曲布局，更复杂的布局就交给大家了
为大家推荐现在关注度比较高的微信小程序教程一篇： 《微信小程序开发教程》 小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。