1. 程式人生 > >小程式點選事件,新增class樣式

小程式點選事件,新增class樣式

業務場景:點選對應的積分的時候,給加上顏色

實現方案:首先這三個積分型別是datas迴圈出來的,我們需要使用小程式的data-來自定義屬性,在點選不同型別的時候,獲取到對應的id,將這個id拿到js那邊重新附一個值isSelect,在進行判斷isSelect跟迴圈的id是否相等,相等的時候加

/*
author:咔咔
address:陝西西安
wechat:fangkangfk
*/

<view class="top2">
      <view class="listitem" wx:for="{{datas}}" wx:key="{{index}}">
 
      <view class='{{isSelect==item.id? "toplists clicks": "toplists"}}' data-price="{{item.price}}"   data-integral="{{item.integral}}" data-id="{{item.id}}" bindtap="select">
          {{item.integral}}積分
      </view>
      </view>
      
    </view>

js程式碼

/*
author:咔咔
address:陝西西安
wechat:fangkangfk
*/
 
// 選擇不同的積分獲得不同的價錢
  select:function(e){
    console.log(e)
    var sum = e.target.dataset.price;
    var integralNum = e.target.dataset.integral;
    var id = e.target.dataset.id;
    this.setData({
      sum: sum,
      integralNum: integralNum,
      isSelect: id
    })
  },