小程序 列表点击变色

工作日志 随手笔记 仅供参考

 

通过点击时候判断点击的是哪一个，然后判断item ==shopitem 使之变色

<view class='shop_list'  >
       <view class="shop_item{{item == shopitem?'active':''}}" wx:for="{{shop}}" bindtap='bindshop' data-classify="{{item}}" >{{item}}</view>

     </view>

 data：{
    shop:['默认排序','最新上拍','即将结拍'],
    shopitem:'默认排序'   //默认显示的
}

 bindshop:function(event){
    var classify = event.currentTarget.dataset.classify;
    var that = this;

    console.log(classify)  //输出的结果就是你点击的
    this.setData({
      shopitem: classify,  //更新


    })
  },

/*商品分类  */
.shop {
  background: white
}
.shop_list {
  display: flex;
  padding: 30rpx 40rpx;
  justify-content: space-around;
}
.shop_item {
  font-size: 30rpx;
  color: #555
}
.shop_itemactive {
  font-size: 30rpx;
  color: red;
}