小程序入門018～小程序列表背景顏色交替顯示 表格背景顏色交替 單雙交替顯示不同的背景顏色
2021-08-08 14:14:45

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

?

?

經(jīng)過一番研究，發(fā)現(xiàn)借助css3的nth-child() 選擇器可以很好的實現(xiàn)，顏色交替效果。

如我們定義如下index.wxml

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

在index.js里定義如下數(shù)據(jù)。

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

1，奇數(shù)列紅色，偶數(shù)列綠色背景，定義如下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() 選擇器可以很好的實現(xiàn)列表中背景顏色交替實現(xiàn)的效果。

?

本節(jié)課是《手把手帶你零基礎入門小程序》系列課程的一節(jié)，如果你想快速入門小程序開發(fā)，想學習小程序云開發(fā)，可以跟著老師來零基礎入門，10小時學會小程序開發(fā)小程序，從開發(fā)到上線小程序的完整流程都有講。

本套課程主要就是面向零基礎人員。所以講解的都是一些通俗易懂的入門技能。所以完全不用擔心自己不懂編程?