原創聲明:本文為作者原創,未經允許不得轉載,經授權轉載需注明作者和出處
針對于數據列表,相隔行不同的背景色,以便區分的效果。
在CSS中稱為隔行換色 實現代碼為以下,但在小程序不起作用。只能換種思路來解決
CSS傳統寫法(在小程序中不起作用):#div li:nth-of-type(odd){background:#00CCFF;}/*奇數行*/
#div li:nth-of-type(even){background:#FFCC00;}/*偶數行*/
有三種方式可以解決此問題(其實三種基礎同樣原理,利用數據進行判斷加載)
1.利用數據判斷加載不同CSS樣式來達到效果,即如果后臺傳一個識別判斷列數據到前端,前端根據此變量數據來判斷是加載哪一種CSS樣式(重點講解此方式并推薦)
2.利用wx:if來判斷加載哪一個View
3.利用wx:for中的屬性index來作判斷以作加載哪種樣式 {{index%2==0 ? ‘vwdataeven’ : ‘vwdataodd’}}(謝謝劉冰華同志提供的更為簡潔的方式)
1.利用數據判斷加載不同CSS樣式
首先在wxss文件中定義兩個不同的背景色的CSS樣式
.vwdataodd{
/*奇數行*/
background-color: #292421;
}
.vwdataeven{
/*偶數行*/
background-color: #1D1D26;
}
其次在js文件中定義一個變量,把整個需要加載的數據排列定義一個行號賦上
最后在wxml文件中進行判斷處理即可
2.利用數據加載不同的view
3.利用wx:for屬性中的index來作判斷
效果圖: