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

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

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

table.wxml

视图class=table

视图 tr bg-w

view class=thhead1/view

view class=thhead2/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 )

}

})

效果图如下

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

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

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