uni-app、小程序、Vue等双击事件写法【绝对好使】

507 阅读1分钟

效果图如下:

image.png

目前uni-app view标签不支持双击事件,下面自定义双击事件:

<view @click="handClick(index)"></view>

将自己需要调用的函数放在console.log(“单击/双击”) 下面

data(){
  return {
  lastTapTimeoutFunc:null,
  lastTapDiffTime:0
  }
},

methods:{
  // 单击或双击
  handClick(index) {
      let _this = this;
      let curTime = new Date().getTime();
      let lastTime = _this.lastTapDiffTime;
      _this.lastTapDiffTime = curTime;
      //两次点击间隔小于300ms, 认为是双击
      let diff = curTime - lastTime;
      if (diff < 300) {
      console.log("双击")
      //_this.handleVideo('screen',index)自定义事件
      clearTimeout(_this.lastTapTimeoutFunc); // 成功触发双击事件时,取消单击事件的执行
      } else {
      // 单击事件延时300毫秒执行
      _this.lastTapTimeoutFunc = setTimeout(function() {
      console.log("单击")
      //_this.handleVideo('playOrStop',index)自定义事件
      }, 300);
      }
  }
}