當(dāng)前位置:首頁 > IT技術(shù) > 微信平臺(tái) > 正文

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

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

小程序入門018~小程序列表背景顏色交替顯示 表格背景顏色交替  單雙交替顯示不同的背景顏色_nth-child

?

?

經(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;
}

效果圖如下

?

小程序入門018~小程序列表背景顏色交替顯示 表格背景顏色交替  單雙交替顯示不同的背景顏色_nth-child_02

?

?

?

?

2,三種顏色的交替

?

小程序入門018~小程序列表背景顏色交替顯示 表格背景顏色交替  單雙交替顯示不同的背景顏色_nth-child_03

?

?

?

?

可以看到我們借助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

開通會(huì)員,享受整站包年服務(wù)立即開通 >