美文网首页
微信小程序表格(列宽自适应,可横向翻滚)

微信小程序表格(列宽自适应,可横向翻滚)

作者: 寻找大海的鱼 | 来源:发表于2019-10-14 21:29 被阅读0次

    一.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

    相关文章

      网友评论

          本文标题:微信小程序表格(列宽自适应,可横向翻滚)

          本文链接:https://www.haomeiwen.com/subject/xwudmctx.html