简单mpvue中实现左右滑动事件

简单mpvue中实现左右滑动事件

//简单mpvue中实现左右滑动事件

<div  @touchstart="touchStart"  @touchend="touchEnd"> </div>

<script>
  data() {
   	return {
         interval: "",
         flag_hd: false
   	};
   },
   methods: {
  		 // 触摸开始事件
      touchStart: function(e) {
        var that = this;
        that.touchDot = e.mp.changedTouches[0].pageX; // 获取触摸时的原点
        console.log(that.touchDot);
        // 使用js计时器记录时间
        that.interval = setInterval(function() {
          that.time++;
        }, 100);
        that.flag_hd = true;
      },
      // 触摸结束事件
      touchEnd: function(e) {
        var that = this;
        var touchMove = e.mp.changedTouches[0].pageX;
        console.log(touchMove);
        // 向左滑动
        if (
          touchMove - that.touchDot <= -40 &&
          that.time < 10 &&
          that.flag_hd == true
        ) {
          that.flag_hd = false;
          //执行切换页面的方法
          console.log("向右滑动");
        }
        //向右滑动
        if (
          touchMove - that.touchDot >= 40 &&
          that.time < 10 &&
          that.flag_hd == true
        ) {
          that.flag_hd = false;
          //执行切换页面的方法
          console.log("向左滑动");
        }
        clearInterval(that.interval); // 清除setInterval
        that.time = 0;
      },
   }
</script>