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

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

作者: 寻找大海的鱼 | 来源:发表于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

相关文章

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

    一.wxml代码 二.wxss代码 三.js代码 四.测试 ┭┮﹏┭┮,累死了,遇到好多坑,写了一晚上终于写出来了...

  • 微信小程序尺寸单位rpx以及样式相关介绍

    微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750...

  • CSS布局

    一列布局 一列水平居中 一列垂直居中 两列布局 左定宽右自适应 左自适应右定宽 三列布局 左右定宽中间自适应 左右...

  • 微信小程序尺寸单位rpx以及样式

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 ...

  • px 与rpx 的转换

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。 规定屏幕宽为750rpx。如在 iP...

  • 前端总结

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPh...

  • 微信小程序中尺寸单位rpx及样式的用法

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPh...

  • 一、rpx

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPh...

  • 微信小程序之单位rpx(八)

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPh...

  • 微信小程序设计稿的尺寸

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。 规定屏幕宽为750rpx。如在 iP...

网友评论

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

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