如何在微信小程序中制作表格

　　介绍

如何在微信小程序中制作表格?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

在XXX。wxml中填写下面的代码

& lt; view 类=皌able"比; 　　,& lt; view 类=皌r  bg-w"比; 　　& lt;才能view 类=皌h"在参数& lt;/view> 　　& lt;才能view 类=皌h-2"祝辞内容& lt;/view> 　　,& lt;/view> 　　,& lt; block  wx:=皗{listData}},,天气:关键=皗(代码)}“比; 　　& lt;才能view 类=皌r  bg-g",天气:如果=皗{index  %, 2,==, 0}}“比; 　　,,& lt; view 类=皌d-1",选择=皌rue"在{{item.code}} & lt;/view> 　　,,& lt; view 类=皌d-2",选择=皌rue", scroll-y=皌rue",在 　　,,& lt; text 类=皌h-text",,选择=皌rue"在{{item.text}} & lt;/text> 　　,,& lt;/view> 　　,,& lt; !——view 类=皌d"在{{item.type}} & lt;/视图——比; 　　& lt;才能/view> 　　& lt;才能view 类=皌r  bg-g2",天气:else> 　　,,& lt; view 类=皌d-1",选择=皌rue"在{{item.code}} & lt;/view> 　　,,& lt; view 类=皌d-2",选择=皌rue", scroll-y=皌rue",在 　　,,& lt; text 类=皌h-text",,选择=皌rue"在{{item.text}} & lt;/text> 　　,,& lt;/view> 　　& lt;才能/view> 　　,& lt;/block> 　　& lt;/view>

在XXX。wxs中添加如下代码:

.table  { 　　,边界:2 px  solid  darkgray; 　　,宽度:100%; 　　,margin-top: 1快速眼动; 　　,margin-right: 1快速眼动; 　　,margin-left: 1快速眼动; 　　, 　　, 　　} 　　.tr  { 　　,显示:flex; 　　,宽度:100%; 　　,justify-content:中心; 　　,高度:3快速眼动; 　　,对齐项目:中心; 　　} 　　.td  { 　　宽度:20%,才能 　　,,justify-content:中心; 　　,,显示:flex; 　　,,text-align:中心; 　　边境才能:2 px  solid  # ddd; 　　,,身高:100%; 　　} 　　.td-1  { 　　宽度:19%,才能 　　,,justify-content:中心; 　　,,显示:flex; 　　,,text-align:中心; 　　边境才能:2 px  solid  # ddd; 　　,,身高:100%; 　　} 　　.td-2  { 　　宽度:80%,才能 　　,,justify-content:中心; 　　边境才能:2 px  solid  # ddd; 　　text-align才能:左; 　　,,身高:100%; 　　,,max-width: 100%; 　　,,填充:40 rpx  0; 　　} 　　.bg-w { 　　,背景:# afb4db; 　　, 　　} 　　.bg-g { 　　,背景:# E6F3F9; 　　} 　　.bg-g2 { 　　,背景:# fff; 　　} 　　.th  { 　　,宽度:19%; 　　,justify-content:中心; 　　,颜色:# fff; 　　,显示:flex; 　　,高度:3快速眼动; 　　,对齐项目:中心; 　　,边境:2 px  solid  # ddd; 　　} 　　.th-2  { 　　,宽度:80%; 　　,justify-content:中心; 　　,颜色:# fff; 　　,显示:flex; 　　,高度:3快速眼动; 　　,对齐项目:中心; 　　,max-height: 3快速眼动; 　　,max-width: 80%; 　　}.th-text  { 　　,宽度:80%; 　　,justify-content:中心; 　　,颜色:# 000; 　　,显示:块; 　　,高度:3快速眼动; 　　,对齐项目:中心; 　　,max-height: 3快速眼动; 　　,max-width: 80%; 　　}

在XXX。js页面的页面定义下面的数据

var  idinfolist =, ( 　　,{“code":,“结果,,,“text":, & # 39; & # 39;,}, 　　,{“code":,“省”,,“text":, & # 39; & # 39;,}, 　　,{“code":,“市”,,“text":, & # 39; & # 39;,}, 　　,{“code":,“县”,,“text":, & # 39; & # 39;}, 　　,{“code":,“性别,,,“text":, & # 39; & # 39;}, 　　,{“code":,“出生年月”,,“text":, & # 39; & # 39;}, 　　,{“code":,“地址”,,“text":, & # 39; & # 39;} 　　] 　　, 　　页面({ 　　,数据:{ 　　,,listData: idinfolist,,, 　　inputValue才能:& # 39;& # 39;,,//用于显示输入语句 　　searchinput才能:& # 39;& # 39;,,//用户输入的查询语句 　　之前,})

如何在微信小程序中制作表格