1. 程式人生 > >小程式 列表點選變色

小程式 列表點選變色

工作日誌 隨手筆記 僅供參考



通過點選時候判斷點選的是哪一個,然後判斷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;
}