纵有疾风起
人生不言弃

小程序列表背景颜色交替显示 表格背景颜色交替

最近做小程序,有这个一个需求,就是列表里的条目背景色要实现交替颜色显示。比如奇数列显示红色,偶数列显示绿色。

比如像下面这样。

小程序列表背景颜色交替显示 表格背景颜色交替插图

经过一番研究,发现借助css3的nth-child() 选择器可以很好的实现,颜色交替效果。

如我们定义如下index.wxml

<!--index.wxml--><view class='root' wx:for="{{list}}" wx:key="item">  <view class='item'>{{item}}</view></view>

在index.js里定义如下数据。

//index.jsPage({  data: {    list: [1, 2, 3, 4, 5, 6, 7, 8, 9]  }})

实现如下效果

1,奇数列红色,偶数列绿色背景,定义如下wxss

/**index.wxss**/.root:nth-child(1n+0) {  background: red;}.root:nth-child(2n+0) {  background: green;}.item {  width: 100%;  height: 40px;}

效果图如下

小程序列表背景颜色交替显示 表格背景颜色交替插图1

2,三种颜色的交替

小程序列表背景颜色交替显示 表格背景颜色交替插图2

可以看到我们借助nth-child() 选择器可以很好的实现列表中背景颜色交替实现的效果。

文章转载于:https://www.jianshu.com/p/22d86c9d43bd

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 小程序列表背景颜色交替显示 表格背景颜色交替
分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录