微信小程序如何制作表格

更新时间：2019年2月14日14:54:58作者：huangmeimao

本文主要介绍微信小程序为每个人详细制作表格的方法。它具有一定的参考价值。有兴趣的朋友可以参考

本文中的示例共享微信小程序的特定代码以制作表格。

微信小程序没有特殊的表创建工具，但可以使用列表呈现来实现，

下面是我制作的桌子的照片：

方法如下：

填写以下XXX.wxml中的代码

参数 内容 {{item.code}} {{item.text}} {{item.code}} {{item.text}}

在XXX.wxss中添加以下代码：

.table { border: 2px solid darkgray; width: 100%; margin-top: 1rem; margin-right: 1rem; margin-left: 1rem; } .tr { display: flex; width: 100%; justify-content: center; height: 3rem; align-items: center; } .td { width:20%; justify-content: center; display: flex; text-align: center; border-right: 2px solid #ddd; height: 100%; } .td-1 { width:19%; justify-content: center; display: flex; text-align: center; border-right: 2px solid #ddd; height: 100%; } .td-2 { width:80%; justify-content: center; border-right: 2px solid #ddd; text-align: left; height: 100%; max-width: 100%; padding: 40rpx 0; } .bg-w{ background: #afb4db; } .bg-g{ background: #E6F3F9; } .bg-g2{ background: #fff; } .th { width: 19%; justify-content: center; color: #fff; display: flex; height: 3rem; align-items: center; border-right: 2px solid #ddd; } .th-2 { width: 80%; justify-content: center; color: #fff; display: flex; height: 3rem; align-items: center; max-height: 3rem; max-width: 80%; }.th-text { width: 80%; justify-content: center; color: #000; display: block; height: 3rem; align-items: center; max-height: 3rem; max-width: 80%; }

在XXX.js页面的页面上定义以下数据

var idinfolist = [ { "code": "结果", "text": '' }, { "code": "ʡ", "text": '' }, { "code": "市", "text": '' }, { "code": "县", "text": ''}, { "code": "性别", "text": ''}, { "code": "出生年月", "text": ''}, { "code": "地址", "text": ''} ] Page({ data: { listData: idinfolist, inputValue: '', //用于显示输入语句 searchinput: '', //用户输入的查询语句 })

以上是本文的全部内容。我希望它对每个人的学习都有帮助，也希望您能为脚本库提供更多支持。