原生小程序如何实现Table表格功能

概述：由于原生小程序没有Tab组件，也很少有Table表格相关的组件，但是项目中有时也需要通过表格进行数据展示，本文主要讲手写table表格，废话不多说，直接上代码!

1.表格放文字

1-1 ：DOM

<view class="title-tip ps-ab box align-items-center content-center">
    <view class="left-box">
      <view class="line-box long-line" />
      <view class="line-box short-line ml14" />
      <view class="line-box long-line" />
    </view>
    <text class="ml48 mr48 f50 fw-600 tit-desc">会员权益</text>
    <view class="right-box">
      <view class="line-box long-line" />
      <view class="line-box short-line" />
      <view class="line-box long-line" />
    </view>
  </view>
  <view class="container-box ps-re">
    <view class="interests-box ps-ab">
      <view class="interests-list" wx:for="{{interestsList}}" data-key="{{index}}">
        <view class="box align-items-center content-center">
          <view class="circle-line" />
          <view class="tit-desc f28">{{item.content}}</view>
        </view>
      </view>
    </view>
  </view>

1-1 ：css样式

.box {
    display: flex;
    justify-content: center;
    align-items: center;
}
.title-tip {
    width: 100%;
    top: 1145rpx;
    text-align: center;
    .left-box {
      text-align: right;
    }
    .left-box, .right-box {
      .long-line {
        width: 33.3rpx;
      }
      .short-line {
        width: 20.8rpx;
        margin: 4.2rpx 0;
      }
    }
    .tit-desc {
      color: #A6C7FBFF;
    }
    .line-box{
      height: 6.2rpx;
      border-radius: 6.2rpx;
      background: #a6c7fbff;
    }
  }
  
  .container-box {
      height: 1735rpx;
      background: #0d1e3eff;
      text-align: center;
      display: flex;
      justify-content: center;
      .interests-box {
        top: 1260rpx;
        width: 682rpx;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        border-bottom: 1px solid #a6c7fbff;
        border-right: 1px solid #a6c7fbff;
        .interests-list {
          width: 226rpx;
          height: 88rpx;
          line-height: 88rpx;
          text-align: center;
          color: #A6C7FBFF;
          border-top: 1px solid #a6c7fbff;
          border-left: 1px solid #a6c7fbff;
          .circle-line {
            width: 10rpx;
            height: 10rpx;
            margin-right: 15rpx;
            border-radius: 50%;
            background-color: #A6C7FBFF;
          }
        }
      }
    }

2.表格放图片

2-1：DOM

<van-overlay show="{{ show }}">
  <view class="wrapper">
    <view class="ml50 mr50 br16 bg-cfff content-box">
      <view class="top-img">
        <image src="../../assets/images/VIP1_bg.png" mode="scaleToFill" />
      </view>
      <!-- <view class="bg-box">11</view> -->
      <view class="default-color f32 fw-600 text-left mt46 mb28">该功能需要升级购买会员，方可使用！</view>
      <view class="line-style" />
      <view class="title-tip box align-items-center content-center">
        <view class="left-box">
          <view class="line-box long-line" />
          <view class="line-box short-line ml14" />
          <view class="line-box long-line" />
        </view>
        <text class="ml48 mr48 f36 fw-600 tit-desc">会员权益</text>
        <view class="right-box">
          <view class="line-box long-line" />
          <view class="line-box short-line" />
          <view class="line-box long-line" />
        </view>
      </view>

      <view class="container-box">
        <view class="interests-box">
          <view class="interests-list" wx:for="{{interestsList}}" data-key="{{index}}">
            <view class="box align-items-center content-center {{index % 2 == 0 ? 'left-tab-box' : 'right-tab-box'}}">
              <view class="tit-desc f28">{{item.content}}</view>
              <view class="" wx:if="{{item.iconImg}}">
                <image class="w40 h40 mt25" src="../../assets/images/icon_check_line_select.png" mode="scaleToFill" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="row-b-c mb32" wx:if="{{!homePage}}">
        <view class="f32 c-color w200 fw-600 br80 text-center left-btn" bind:tap="clickClose">暂不升级</view>
        <view class="f32 text-center right-btn br80 fw-600" bind:tap="clickUpgrade">立即升级会员</view>
      </view>
      <view class="row-b-c mb32" wx:if="{{homePage}}">
        <view class="f32 text-center right-btn br80 fw-600 w100per ml0" bind:tap="clickUpgrade">立即升级会员</view>
      </view>
    </view>
  </view>

</van-overlay>

2-1 css样式

.wrapper {
  display: flex;
  align-items: center;
  z-index: 99999;
  justify-content: center;
  height: 100%;
  .content-box {
    z-index: 999;
    position: relative;
    width: 680rpx;
    padding: 0 32rpx;
    background: linear-gradient(180deg, #cbd8ffff 0%, #d6deffff 33.17%, #ffffffff 100%);
    .top-img {
      top: 0;
      left: 0;
      width: 100%;
      z-index: -1;
      height: 304rpx;
      border-radius: 16rpx;
      position: absolute;
      background: linear-gradient(180deg, #eff0ffff -1.83%, #efefff00 91.75%);
      image {
        width: 100%;
        height: 100%;
      }
    }
    .bg-box {
      width: 100%;
      z-index: -1;
      height: 798rpx;
      position: absolute;
      background: linear-gradient(180deg, #cbd8ffff 0%, #d6deffff 33.17%, #ffffffff 100%);
    }
    .title-tip {
      top: 1145rpx;
      text-align: center;
      margin: 52rpx 0 48rpx 0;
      .left-box {
        text-align: right;
      }
      .left-box, .right-box {
        .long-line {
          width: 33.3rpx;
        }
        .short-line {
          width: 20.8rpx;
          margin: 4.2rpx 0;
        }
      }
      .tit-desc {
        color: #051286FF;
      }
      .line-box{
        height: 6.2rpx;
        border-radius: 6.2rpx;
        background: #051286FF;
      }
    }
    .container-box {
      text-align: center;
      display: flex;
      justify-content: center;
      .interests-box {
        top: 1260rpx;
        width: 588rpx;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 96rpx;
        align-content: center;
        border-bottom: 1px solid #7781B5FF;
        border-right: 1px solid #7781B5FF;
        .interests-list {
          height: 88rpx;
          line-height: 88rpx;
          text-align: center;
          color: #7781B5FF;
          border-top: 1px solid #7781B5FF;
          border-left: 1px solid #7781B5FF;
          .left-tab-box {
            width: 200rpx;
          }
          .right-tab-box {
            width: 384rpx;
          }
        }
      }
    }
  }
}
.c-color {
  color: #3B47FFFF;
}
.w350{
  width: 350rpx;
}
.default-color {
  color: #051286FF;
}
.line-style {
  height: 6rpx;
  background: linear-gradient(95.63deg, #8cbbfeff 3.67%, #0909beff 126.93%), #0d1e3eff;
}
.left-btn {
  padding: 24rpx 0;
  border: 2rpx solid #3b47ffff;
}
.right-btn {
  width: 384rpx;
  padding: 24rpx 0;
  color: #ffff;
  margin-left: 32rpx;
  background: #3b47ffff;
}

2-1 js

import { navigateTo } from "@utils/util";
Component({
  options: {
    addGlobalClass: true
  },
  properties: {
    homePage:{
      type: Boolean,
      value: false, // 默认不是首页，首页只有一个按钮
    },
    show: {
      type: Boolean,
      value: false,
    }
    
  },
  lifetimes: {
    attached() {
     
    },
    ready() {
     
    },
  },
  data: {
    interestsList: [
      { content: '权益' },
      { content: '黄金会员' },
      { content: '电子榜单' },
      { content: '', iconImg: true },
      { content: '市场行情' },
      { content: '', iconImg: true },
      { content: '...' },
      { content: '...' }
    ]
  },
  created(){},
  methods: {
    // 关闭组件
    clickClose() {
      this.setData({
        show: false,
      });
      // 同步触发父组件弹框关闭事件，更新页面DOM状态
      this.triggerEvent('close', { show: false });
    },
    // 去升级,前往会员中心
    clickUpgrade() {
      navigateTo("/subPages/mine/memberCenter/index");
      this.clickClose()
    },
  }
})  

2-1 JSON

{
  "component": true,
  "usingComponents": {
    "van-overlay": "@vant/weapp/overlay/index"
  }
}

END...