数据列表隔行换色
针对于数据列表,相隔行不同的背景色,以便区分的效果。
在CSS中称为隔行换色 实现代码为以下,但在小程序不起作用。只能换种思路来解决
#div li:nth-of-type(odd){background:#00CCFF;}/*奇数行*/
#div li:nth-of-type(even){background:#FFCC00;}/*偶数行*/
有三种方式可以解决此问题(其实两种基础同样原理,利用数据进行判断加载)
1.利用wx:for中的属性index来作判断(重点讲解此方式并推荐) 以作加载哪种样式 {{index%2==0 ? 'vwdataeven' : 'vwdataodd'}}
2.利用数据判断加载不同CSS样式来达到效果,即如果后台传一个识别判断列数据到前端,前端根据此变量数据来判断是加载哪一种CSS样式
3.利用wx:if来判断加载哪一个View
1.利用wx:for中的属性index来作判断
首先在wxss文件中定义两个不同的背景色的CSS样式
最后在wxml文件中进行判断处理即可
2.利用数据判断加载不同CSS样式
首先在wxss文件中定义两个不同的背景色的CSS样式 同第一种方式的wxss文件一样
其次在js文件中定义一个变量,把整个需要加载的数据排列定义一个行号赋上
最后在wxml文件中进行判断处理即可
2.利用数据加载不同的view
效果图: