關(guān)于數(shù)據(jù)列表實(shí)現(xiàn)隔行換色效果
- • 發(fā)表于 9年前
- • 作者 翔
- • 6057 人瀏覽
- • 12 條評論
- • 最后編輯時(shí)間 9年前
- • 來自 [技 術(shù)]
原創(chuàng)聲明:本文為作者原創(chuàng)，未經(jīng)允許不得轉(zhuǎn)載，經(jīng)授權(quán)轉(zhuǎn)載需注明作者和出處
針對于數(shù)據(jù)列表，相隔行不同的背景色，以便區(qū)分的效果。
在CSS中稱為隔行換色 實(shí)現(xiàn)代碼為以下，但在小程序不起作用。只能換種思路來解決
CSS傳統(tǒng)寫法(在小程序中不起作用)：#div li:nth-of-type(odd){background:#00CCFF;}/*奇數(shù)行*/#div li:nth-of-type(even){background:#FFCC00;}/*偶數(shù)行*/
有三種方式可以解決此問題（其實(shí)三種基礎(chǔ)同樣原理，利用數(shù)據(jù)進(jìn)行判斷加載）
1.利用數(shù)據(jù)判斷加載不同CSS樣式來達(dá)到效果，即如果后臺傳一個識別判斷列數(shù)據(jù)到前端，前端根據(jù)此變量數(shù)據(jù)來判斷是加載哪一種CSS樣式(重點(diǎn)講解此方式并推薦)
2.利用wx:if來判斷加載哪一個View
3.利用wx:for中的屬性index來作判斷以作加載哪種樣式 {{index%2==0 ? ‘vwdataeven’ : ‘vwdataodd’}}（謝謝劉冰華同志提供的更為簡潔的方式）
1.利用數(shù)據(jù)判斷加載不同CSS樣式
首先在wxss文件中定義兩個不同的背景色的CSS樣式
.vwdataodd{
/*奇數(shù)行*/
background-color: #292421;
}.vwdataeven{
/*偶數(shù)行*/
background-color: #1D1D26;
}
其次在js文件中定義一個變量，把整個需要加載的數(shù)據(jù)排列定義一個行號賦上
最后在wxml文件中進(jìn)行判斷處理即可
2.利用數(shù)據(jù)加載不同的view
3.利用wx:for屬性中的index來作判斷
效果圖：
