小程式點選事件,新增class樣式
阿新 • • 發佈:2019-01-26
業務場景:點選對應的積分的時候,給加上顏色
實現方案:首先這三個積分型別是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 }) },