小程序列表隔行换色

先看效果

很直接的做法，先去css区定义两种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了

css方面的做法有个更简单的，但是需要用到nth-child，虽然pc的浏览器不一定全支持nth-child，但小程序是可以使用的

.categ:ntd-child(even){
    background:#ECFFFF
}

效果是一样的，只是平时pc端需要注意ie兼容性问题尽量少用