微信小程序表格

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;
}

js

 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"}
    ],
    ```