评论

小程序入门018~小程序列表背景颜色交替显示 表格背景颜色交替

借助css3的nth-child() 选择器可以很好的实现,颜色交替效果

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

比如像下面这样。




经过一番研究,发现借助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.js
Page({
 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;
}

效果图如下






2,三种颜色的交替






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


有任何关于小程序的问题可以微信交流 2501902696(备注小程序)


点赞 1
收藏
评论

2 个评论

  • 无与愿
    无与愿
    2019-08-01

    前面还有小程序入门01~017吗?

    2019-08-01
    赞同
    回复 2
    • 编程小石头
      编程小石头
      2019-08-01
      有的
      2019-08-01
      回复
    • 无与愿
      无与愿
      2019-08-05回复编程小石头
      在哪里可以看到,我翻阅了你发布的好像没找到额
      2019-08-05
      回复
  • 李迎伏
    李迎伏
    2019-06-13

    12345

    2019-06-13
    赞同
    回复 1
    • 编程小石头
      编程小石头
      2019-06-14

      上山打老虎

      2019-06-14
      回复
登录 后发表内容