大家好，又见面了，我是你们的朋友全栈君。
微信小程序中没有专门的表格制作工具，不过使用列表渲染可以实现，
下面是我做的表格图片：
方法如下：
在XXX.wxml中填写下面的代码
代码语言：javascript复制<view class="table">
<view class="tr bg-w">
<view class="th">参数</view>
<view class="th-2">内容</view>
</view>
<block wx:for="{
{listData}}" wx:key="{
{code}}">
<view class="tr bg-g" wx:if="{
{index % 2 == 0}}">
<view class="td-1" selectable="true">{
{item.code}}</view>
<view class="td-2" selectable="true" scroll-y="true" >
<text class="th-text" style="overflow-y:auto;overflow-x:scroll" selectable="true">{
{item.text}}</text>
</view>
<!--view class="td">{
{item.type}}</view-->
</view>
<view class="tr bg-g2" wx:else>
<view class="td-1" selectable="true">{
{item.code}}</view>
<view class="td-2" selectable="true" scroll-y="true" >
<text class="th-text" style="overflow-y:auto;overflow-x:scroll" selectable="true">{
{item.text}}</text>
</view>
</view>
</block>
</view>在XXX.wxss中添加如下代码：
代码语言：javascript复制.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页面的pages定义下面的数据
代码语言：javascript复制var idinfolist = [ { "code": "结果", "text": '' }, { "code": "省", "text": '' }, { "code": "市", "text": '' }, { "code": "县", "text": ''}, { "code": "性别", "text": ''}, { "code": "出生年月", "text": ''}, { "code": "地址", "text": ''}]Page({ data: { listData: idinfolist, inputValue: '', //用于显示输入语句 searchinput: '', //用户输入的查询语句 })完整代码下载：
智能生活宝-智能对话小程序Demo下载
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/157840.html原文链接：https://javaforall.cn
