一.wxml代码
<scroll-view scroll-x class='table'>
<view class='tr'>
<view class='td' wx:for='{{array}}'wx:key='index' style="width:{{sizeList[index]}}px">{{item.value}}</view>
</view>
<view class='tr'>
<view class='td' wx:for='{{array}}'wx:key='index' style="width:{{sizeList[index]}}px">{{item.value}}</view>
</view>
<view class='tr'>
<view class='td' wx:for='{{array}}'wx:key='index' style="width:{{sizeList[index]}}px">{{item.value}}</view>
</view>
<view class='tr'>
<view class='td' wx:for='{{array}}'wx:key='index' style="width:{{sizeList[index]}}px">{{item.value}}</view>
</view>
<view class='tr'>
<view class='td' wx:for='{{array}}'wx:key='index' style="width:{{sizeList[index]}}px">{{item.value}}</view>
</view>
</scroll-view>
二.wxss代码
.table {
font-size: 24rpx;
margin-top: 50rpx;
border: 1rpx solid #dadada;
white-space:nowrap;
display:flex;
}
.tr {
width: 100%;
justify-content: space-between;
}
.td {
padding: 10rpx;
border-bottom: 1rpx solid #dadada;
border-right: 1rpx solid #dadada;
text-align: center;
height:40px;
display:inline-block;
align-items:center;
font-size:12px;
}
三.js代码
Page({
data: {
sizeList: [],
array: [{
value: '212121221'
},
{
value: '1221'
},
{
value: '2121221'
},
{
value: '21'
},
{
value: '21221'
},
{
value: '21221'
},
{
value: '2'
},
{
value: '21'
},
{
value: '2121212222222221'
},
{
value: '2121'
}]
},
onLoad: function(options){
let array = this.data.array
for (let i = 0; i < array.length;i++){
let size = array[i].length;
this.data.sizeList.push(size)
}
}
})
四.测试
┭┮﹏┭┮,累死了,遇到好多坑,写了一晚上终于写出来了,成功!!!O(∩_∩)O!!!
测试图1.png
测试图1.png
网友评论