小程序列表背景颜色交替显示 表格背景颜色交替

最近做小程序，有这个一个需求，就是列表里的条目背景色要实现交替颜色显示。比如奇数列显示红色，偶数列显示绿色。

比如像下面这样。

经过一番研究，发现借助css3的nth-child() 选择器可以很好的实现，颜色交替效果。

如我们定义如下index.wxml

<!--index.wxml-->
<view class='root' wx:for="{{list}}" wx:key="item">
  <view class='item'>{{item}}</view>
</view>

在index.js里定义如下数据。

//index.js
Page({
  data: {
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9]
  }
})

实现如下效果

1，奇数列红色，偶数列绿色背景，定义如下wxss

/**index.wxss**/

.root:nth-child(1n+0) {
  background: red;
}

.root:nth-child(2n+0) {
  background: green;
}

.item {
  width: 100%;
  height: 40px;
}

效果图如下

2，三种颜色的交替

可以看到我们借助nth-child() 选择器可以很好的实现列表中背景颜色交替实现的效果。