微信 小程序组件 焦点切换

.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,

});

},