微信小程序单选题双击取消功能实现

因为单选题不自带双击取消功能,于是在我学习了其中的逻辑之后我决定自行编写代码实现该功能。具体实现方法:添加了一个状态变量isChecked,初始值设为false,在选项上添加了点击事件,设置了两个全局变量,在点击事件中,第一个全局变量存奇数次选择的值,第二个全局变量存偶数次选择的值,将这两个变量进行对比,如果存的值一样,设置isChecked的值为false,同时将存该选项答案的变量设为空,不一样则不做处理。代码如下:
.wxml
微信小程序单选题双击取消功能实现_第1张图片
.wxss文件是样式设置,我不就不贴了
.js
微信小程序单选题双击取消功能实现_第2张图片

//单选框改变事件处理函数 
  onRadio(e) {
    this.data.counnt = this.data.counnt + 1
    console.log('efs', this.data.counnt)
    var value1 = ''
    var value2 = ''
    const that = this
    //第一次赋值
    if (this.data.counnt % 2 != 0) {
      value1 = e._relatedInfo.anchorTargetText
      that.setData({
        value1: value1
      })
    } else {
      //第二次赋值
      value2 = e._relatedInfo.anchorTargetText
      that.setData({
        value2: value2
      })
    }
    if (this.data.value1 == this.data.value2) {
      console.log(this.data.value1)
      this.setData({
        isChecked: false
      });
      this.data.sex=''
    }
  },

你可能感兴趣的:(微信小程序,小程序)