微信小程序table表格-隔行换色

wxml

  <view class="table">
<view class="tableTr">
  <view class="Tr">厂商品牌</view>
  <view class="Tr">销量</view>
  <view class="Tr">同比增长</view>
  <view class="Tr">环比增长</view>
</view>
<block wx:for="{{list}}">
  <view class="tableTd" style="background:#F3F7FA;" wx:if="{{index%2===0}}">
    <view class="Td">{{item.name}}</view>
    <view class="Td">{{item.size}}</view>
    <view class="Td">{{item.height}}</view>
    <view class="Td">{{item.width}}</view>
  </view>
  <view class="tableTd" style="background: #FFFFFF;" wx:else>
    <view class="Td">{{item.name}}</view>
    <view class="Td">{{item.size}}</view>
    <view class="Td">{{item.height}}</view>
    <view class="Td">{{item.width}}</view>
  </view>
</block>
<!-- 上拉加载更多 -->
<view class="aa CommonWight">上拉加载更多</view>

就是使用block 循环，wx：if 做判断 奇数偶数

wxss

	.tabls {
background: #ffffff;
margin-top: 20rpx;
border-radius: 12rpx;
}

.tabls_top {
height: 94rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0 20rpx 0 20rpx;
}

.tables_title {
font-size: 32rpx;
font-family: PingFang-SC-Bold, PingFang-SC;
font-weight: bold;
color: #333333;
}

.btn {
font-size: 24rpx !important;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #0080FF;
height: 40rpx !important;
background: #ffffff;
}

.table {
border: 0px solid darkgray;
height: 540rpx;
}

.tableTr {
display: flex;
justify-content: space-around;
align-items: center;
width: 99%;
height: 50rpx;
background: #FFFFFF;
box-shadow: 0px 0px 12px 0px rgba(0, 128, 255, 0.2);
border-radius: 12rpx;
border: 1px solid #0080FF;
}

.Tr {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #0080FF;
flex: 0.25;
text-align: center;
}

.tableTd {
height: 48rpx;
display: flex;
width: 99%;
border-radius: 12rpx;
align-items: center;
}

.Td {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
flex: 0.25;
text-align: center;
}

wxjs

    list: [
        { name: "阿斯顿0", size: 666, height: "0.1", width: "0.2" },
        { name: "阿斯顿1", size: 666, height: "0.1", width: "0.2" },
        { name: "阿斯顿2", size: 666, height: "0.1", width: "0.2" },
        { name: "阿斯顿3", size: 666, height: "0.1", width: "0.2" },
        { name: "阿斯顿4", size: 666, height: "0.1", width: "0.2" },
        { name: "阿斯顿5", size: 666, height: "0.1", width: "0.2" },
        { name: "阿斯顿6", size: 666, height: "0.1", width: "0.2" },
        { name: "阿斯顿7", size: 666, height: "0.1", width: "0.2" },
    ]