欧美日韩国产一区,亚洲一区视频,色综合久久久久,私密按摩师舌头伸进去了,99re6这里只有精品,夜夜性日日交xxx性hd

關于數據列表實現隔行換色效果

  • • 發表于 8年前
  • • 作者 翔
  • • 5979 人瀏覽
  • • 12 條評論
  • • 最后編輯時間 8年前
  • • 來自 [技 術]

原創聲明:本文為作者原創,未經允許不得轉載,經授權轉載需注明作者和出處

針對于數據列表,相隔行不同的背景色,以便區分的效果。
在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來作判斷

效果圖:

分享到:
12條評論
Ctrl+Enter
作者

翔

APP:2 帖子:8 回復:60 積分:1214

已加入社區[3107]天

主人太懶,簽名沒設置!

作者詳情》
Top