小程序不支持table标签怎么办
小程序不支持table标签，但是可以使用css的display: table;来实现表格样式。
推荐学习：小程序开发
具体实现如下：
1、通过设置js里面的数组对象格式模拟动源码下载wcqh.cn态后台获取的数据，然后将数组对象内容以三个元素为一组组成数组对象格式再合并成一个新的数组对象格式，之所以这样做就是为了，一行有三个单元格设计的:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
Page({
data: {
tableData: [{ //源码下载wcqh.cn模拟动态获取到的后台数据：数组对象格式
id: 0,
name: 'table-th-cell'
},
{
id: 1,
name: 'table-th-cell'
},
{
id: 2源码下载wcqh.cn,
name: 'table-th-cell'
},
{
id: 3,
name: 'table-tr-cell'
},
{
id: 4,
name: 'table-tr-cel源码下载wcqh.cnl'
},
{
id: 5,
name: 'table-tr-cell'
},
{
id: 6,
name: 'table-tr-cell'
},
{
id: 7,
name: 源码下载wcqh.cn9;table-tr-cell'
},
{
id: 8,
name: 'table-tr-cell'
},
],
threeArray: '', //模拟将后台获取到的数组对源码下载wcqh.cn象数据按照一行3个的单元数据的格式切割成新的数组对象（简单的说：比如获取到数组是9个元素，切分成，3个元素一组的子数组）
},
onLoad: function() {
let that = this;
le源码下载wcqh.cnt threeArray = [];
// 使用for循环将原数据切分成新的数组
for (let i = 0, len = that.data.tableData.length; i < len; i 源码下载wcqh.cn+= 3) {
threeArray.push(that.data.tableData.slice(i, i + 3));
}
console.log(threeArray);
that.setData({
t源码下载wcqh.cnhreeArray: threeArray
})
},
})
2、设置wxml:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<view class=”table”>
<block wx:for='源码下载wcqh.cn;{{threeArray}}' wx:key='*this' wx:for-item='oneArray'>
<!– 注意嵌套的数组对象 –>
<view c源码下载wcqh.cnlass=”table-tr” wx:if='{{index<1}}'>
<block wx:for='{{oneArray}}' wx:key='id'源码下载wcqh.cn>
<view class=”table-th”>{{item.name}}</view>
</block>
</view>
<view class=”table-tr” wx:else>
<block wx:源码下载wcqh.cnfor='{{oneArray}}' wx:key='id'>
<view class=”table-td”>{{item.name}}</view>
</block>
</源码下载wcqh.cnview>
</block>
</view>
3、设置wxss:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.table {
display: table;源码下载wcqh.cn
width: 100%;
/* border-collapse 属性设置表格的边框是否被合并为一个单一的边框，解决相邻单元格边框未合并导致有些边框变粗的视觉效果 */
border-collapse: c源码下载wcqh.cnollapse;
overflow-x: hidden;
}
.table-tr {
display: table-row;
width: 100%;
height: 200rpx;
}
.table-th {
dis源码下载wcqh.cnplay: table-cell;
font-weight: bold;
border: 1px solid black;
text-align: center;
vertical-align: middle源码下载wcqh.cn;
background-color: #ccc;
}
.table-td {
display: table-cell;
border: 1px solid black;
text-align: center;
v源码下载wcqh.cnertical-align: middle;
}
效果如下：
以上就是小程序不支持table标签怎么办的详细内容，更多请关注php中文网其它相关文章！
会员专属
暂无评论内容