微信 小程序组件 焦点切换

.monery-detail .active{
">#e5c41d;
color: white;
}
 
<block wx:key="recharge" wx:for="{{recharge}}" wx:for-index="index">
<!-- 绑定焦点函数rechargeActive -->
<view class='monery-text {{item.active}}' data-id="{{item.id}}" bindtap='rechargeActive'>
<text>充{{item.fulfill}}</text>
<text class='monery-text-min'>送{{item.present}}</text>
</view>
</block>
 
 
data: {
recharge: [
{ id: 1, fulfill: 1000, present: 500, active:"active"},
{ id: 2, fulfill: 1500, present: 800, active:''},
{ id: 3, fulfill: 2000, present: 1000, active:''},
{ id: 4, fulfill: 3000, present: 1500, active:''},
{ id: 5, fulfill: 3000, present: 1500, active:''}
]
},
 
// 焦点函数
rechargeActive:function(e){
var activeId = e.currentTarget.dataset.id;
var recharge = this.data.recharge;
for (var i = 0; i < recharge.length;i++){
recharge[i].active='';
}
recharge[activeId-1].active = 'active';
this.setData({
recharge: recharge,
});
},
原文地址:https://www.cnblogs.com/dianzan/p/7574969.html