四时宝库

程序员的知识宝库

微信小程序教程(第二十一篇)(微信小程序实用教程)

数据列表隔行换色

针对于数据列表,相隔行不同的背景色,以便区分的效果。

在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

效果图:

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接