15621857753

微信小程序列表隔行换色解决方案

来源:齐鲁建站 栏目:建站教程 阅读: 日期:2021-01-15

本文主要介绍了微信小程序列表隔行换色解决方案,介绍的简洁又详实,可以直接拿去使用,推荐给有此需要的,值得一试。

响应式网站建设

效果图:

解决方法:

一、先定义两种CSS

.categ{
   height: 70rpx;
}
.categ1{
   height: 70rpx;
   background-color: #ECFFFF    
}

二、写wxml文件

<view class="categ flex-center {{index % 2 == 0?'categ1':'categ'}}" wx:for="{{servicesInfo}}" wx:key="{{servicesInfo}}" data-index="{{index}}" data-remarks="{{item.remarks}}" data-id="{{item.goodsCategoryId}}" bindtap="goCateg" >
    <text>{{item.goodsCategoryName}}</text>
</view>

重点在{{index % 2 == 0?'categ1':'categ'}},这样就Ok了

以上就是关于小程序隔行换色的所有内容,希望可以帮到大家,欢迎扫码加微信一起交流~

公众号二维码

展开