微信小程序之实现隔行变色表格

微信小程序没有table标签，但是又需要实现这样的效果，参考别人的调整了样式细节，共享一下。

最终效果如图所示：

代码实现：

wxml

<view class="table">
  <view class="tr bg-w">
    <view class="th index-width">排名</view>
    <view class="th enterprise-name-width">名称</view>
    <view class="th count-width">数量</view>
  </view>
  <block wx:for="{{listData}}" wx:key="{{code}}">
    <view class="tr {{index % 2 == 0?'' : 'bg-g'}}">
      <view class="td index-width">{{index+1}}</view>
      <view class="td enterprise-name-width">{{item.name}}</view>
      <view class="td count-width">{{item.count}}</view>
    </view>
  </block>
</view>

js

Page({
  data: {
    listData: [{
        name: "名称1",
        count: 10
      },
      {
        name: "名称2",
        count: 8
      },
      {
        name: "名称3",
        count: 7
      },
      {
        name: "名称4",
        count: 4
      }
    ]
  },
  onLoad: function () {
    // 调用接口进行数据初始化
    //this.getRankSum();
  },
  /**
   * 获取排名
   */
  getRankSum() {
    // 请求后对表格进行数据填充
    my.getRankSum().then(response => {
      this.setData({
        loading: false
      });
      let result = response.data.list;
      this.setData({
        listData: result
      });
    });
  }
})

wxss

/* 表格相关样式 */
.table {
  min-height: 200px;
  border: 1px solid #e8e1e1;
  border-radius: 3px;
  margin-top: 20px;
  font-size: 15px;
  text-align: left;
  margin: 15px;
}

.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 3rem;
  align-items: center;
  color: #8c8686;
}

.td {
  width: 40%;
  justify-content: left;
  padding-left: 17px;
}

.bg-w {
  background: snow;
}

.bg-g {
  background: #fde9f0;
}

.th {
  width: 40%;
  justify-content: left;
  padding-left: 17px;
  background: #ffbed4;
  color: #fff;
  display: flex;
  height: 3rem;
  align-items: center;
}

.enterprise-name-width {
  width: 65% !important;
}

.index-width {
  width: 15% !important;
}

.count-width {
  width: 20% !important;
}

.loadMore {
  position: relative;
  text-align: center;
  margin-top: 20px;
}

其他微信小程序相关博客：

微信小程序 自定义组件和父子组件的传参

微信小程序之 swiper 的 tab 选项卡高度自适应问题解决方案

微信小程序之文件和图片的上传

微信小程序登录流程（自定义账号绑定功能）

微信小程序之 如何添加背景图片 & 包大小超限解决方案