微信小程序表格

╰+攻爆jí腚メ 2021-10-19 05:58 199阅读 0赞

WXML

<view class="incomeDaren">
      <view style='background:white;margin:20rpx;border-radius:10rpx;'>
        <view style='color:rgba(254, 117, 29, 1);text-align:center;padding:20rpx;font-weight:bold'>收入达人榜</view>
        <view class="table">
          <view class="tr bg-w">
            <view class="th">名次</view>
            <view class="th">昵称</view>
            <view class="th ">收益</view>
          </view>
          <block wx:for="{ {listData}}" wx:key="{ {code}}">
            <view class="tr bg-g">
              <view style='color:#B2B2B2' class="td">{ { item.code}}
              </view>
              <view style='font-size:26rpx' class="td">{ { item.text}}</view>
              <view style='color:#B2B2B2' class="td">{ { item.type}}</view>
            </view>
          </block>
        </view>
      </view>
    </view>

wxss

/* 表格测试 */
    .table { 
      border: 0px solid darkgray;
      height:900rpx;
      overflow:scroll
    }
    ::-webkit-scrollbar { 
      display: none;
    }
    .tr { 
      display: flex;
      width: 100%;
      justify-content: center;
      height: 3rem;
      align-items: center;
    }
    .td { 
        width:40%;
        justify-content: center;
        text-align: center;
    }
    .th { 
      width: 40%;
      justify-content: center;
      color: black;
      display: flex;
      height: 3rem;
      align-items: center;
    }

listData:[
          {  "code": "1", "text": "小宝贝丶", "type":"¥56594"},
          {  "code": "2", "text": "放下屠刀...", "type":"¥46594"},
          {  "code": "3", "text": "李易峰老婆", "type":"¥40594"},
          {  "code": "4", "text": "Frank", "type":"¥37654"},
          {  "code": "5", "text": "远山", "type":"¥37555"},
          {  "code": "6", "text": "哲", "type":"¥35341"},
          {  "code": "7", "text": "M。", "type":"¥32201"},
          {  "code": "8", "text": "鱼", "type":"¥31231"},
          {  "code": "9", "text": "景山", "type":"¥31220"},
          {  "code": "10", "text": "忘记时间", "type":"¥30231"},
          {  "code": "11", "text": "小北", "type":"¥28562"}
        ],
        ```