小程序列表背景顏色交替顯示 表格背景顏色交替

最近做小程序，有這個一個需求，就是列表裏的條目背景色要實現交替顏色顯示。比如奇數列顯示紅色，偶數列顯示綠色。

比如像下面這樣。

經過一番研究，發現藉助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() 選擇器可以很好的實現列表中背景顏色交替實現的效果。