最近做小程序,有這個(gè)一個(gè)需求,就是列表里的條目背景色要實(shí)現(xiàn)交替顏色顯示。比如奇數(shù)列顯示紅色,偶數(shù)列顯示綠色。比如像下面這樣。
?
?
經(jīng)過一番研究,發(fā)現(xiàn)借助css3的nth-child() 選擇器可以很好的實(shí)現(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]
}
})
實(shí)現(xiàn)如下效果
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() 選擇器可以很好的實(shí)現(xiàn)列表中背景顏色交替實(shí)現(xiàn)的效果。
?
本節(jié)課是《手把手帶你零基礎(chǔ)入門小程序》系列課程的一節(jié),如果你想快速入門小程序開發(fā),想學(xué)習(xí)小程序云開發(fā),可以跟著老師來零基礎(chǔ)入門,10小時(shí)學(xué)會(huì)小程序開發(fā)小程序,從開發(fā)到上線小程序的完整流程都有講。
本套課程主要就是面向零基礎(chǔ)人員。所以講解的都是一些通俗易懂的入門技能。所以完全不用擔(dān)心自己不懂編程?
本文摘自 :https://blog.51cto.com/u