小程序 微信统计表格_微信小程序制作表格的方法

本文实例为大家分享了微信小程序制作表格的具体代码。

微信小程序中没有专门的表格制作工具，不过使用列表渲染可以实现，

下面是我做的表格图片：

方法如下：

在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页面的pages定义下面的数据

var idinfolist = [

{ "code": "结果", "text": '' },

{ "code": "省", "text": '' },

{ "code": "市", "text": '' },

{ "code": "县", "text": ''},

{ "code": "性别", "text": ''},

{ "code": "出生年月", "text": ''},

{ "code": "地址", "text": ''}

]

Page({

data: {

listData: idinfolist,

inputValue: '', //用于显示输入语句

searchinput: '', //用户输入的查询语句

})

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