开发的时候常常会遇到需要点击切换元素样式的时候
在微信小程序开发时,由于其类似于 vue 不建议直接操作 DOM ,事件触发的时候同样会有默认参数传入, 但是无法直接取到 DOM 节点本身,而是包含挂载的一些数据,和点击部位的坐标信息等
fn:function(event){ console.log(event) }
因此我们通过数据间接操纵 DOM来实现切换class
问题描述
这个任务列表的按钮有三种状态,未完成任务、已完成任务未领取奖励、领取奖励,需要根据任务状态切换样式。
原始代码:
<view class="card" >
<view class="card-title"> 每日任务</view>
<view class="flex justify-between align-center " style="padding:12rpx 0;"
wx:for="{{taskList}}" wx:key="id" wx:for-item="item">
<view><text class="iconfont icon-yudingxuzhi"></text> {{item.name}}</view>
<view class="btn2" bindtap="task" data-item="{{item}}">{{item.awardText}}</view>
</view>
</view>
</view>
完成class切换可以通过三元表达式来实现
<view class="btn2 {{item.state != 0 ? (item.state == 1 ? 'btn2-1' : 'btn2-2') : ''}}"
bindtap="task" data-data="{{item}}">{{item.awardText}}</view>
给元素设置data属性,将item.state代表任务的三个状态,在事件中改变state的值
signIn(){
let _self = this;
if(!this.data.signFlag){
wx.showToast({
title: '签到成功',
// icon: 'success',
duration: 1000,
success(){
setTimeout(function(){
_self.setData({
signText:'已签到',
signFlag:true,
point:_self.data.point+10,
'taskList[0].awardText' : '领10积分',
'taskList[0].state' : 1
})
},800)
}
})
}
},
补充说明
在标签中利用 data-xxx 来定义你要传入的参数,
<view data-data="{{item}}"></view>
然后事件中传入 event 用 event.currentTarget.dataset.xxx 来取你传入的值
补充2:Toast默认duration为1500,一般使用不需要手动关闭。
虽然官方文档上说,wx.showToast 应与 wx.hideToast 配对使用。不过hideToast的意义,应该是你设置了duration为0的时候,必须等部分操作完成后,再调用hideToast手动关闭。
参考资料:https://blog.csdn.net/c_kite/article/details/72899520
如果不是使用for循环的,可以和这篇中一样使用绑定相同的变量_num的方式