微信 小程序组件 焦点切换
转载.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,
});
},
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:小程序开发 模态弹出框的控制
下一篇:微信 小程序布局 标题之二分列表
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
移动端小程序项目选型知识