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

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

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

下面是我做的表格图片:

方法如下:

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

<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中添加如下代码:

.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: '', //用户输入的查询语句

})

以上是 微信小程序制作表格的方法 的全部内容, 来源链接: utcz.com/z/354639.html

回到顶部