微信小程序点击切换class

开发的时候常常会遇到需要点击切换元素样式的时候

在微信小程序开发时，由于其类似于 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的方式