vue移动端触摸事件 touchstart、touchmove、

事件绑定

v-on:touchstart="bodyTouchStart"
v-on:touchmove="bodyTouchMove"
v-on:touchend="bodyTouchEnd"

触摸开始

bodyTouchStart: function(event) {
      // console.log(111);
      // 获得起点X坐标，初始化distance为0
      this.touchStartPointX = event.targetTouches[0].pageX;
      this.touchStartPointY = event.targetTouches[0].pageY;
      // console.log(this.touchStartPoint);
      this.distanceX = 0;
      this.distanceY = 0;
    },

触摸移动

bodyTouchMove: function(event) {
      // console.log(222);
      if (this.touchStartPointX < this.touchLeft) {
        // 只监听单指划动，多指划动不作响应
        if (event.targetTouches.length > 1) {
          return;
        }
        // console.log(event.targetTouches[0].pageX);
        // 实时计算distance
        this.distanceX = event.targetTouches[0].pageX - this.touchStartPointX;
        this.distanceY = event.targetTouches[0].pageY - this.touchStartPointY;
        // 根据distance在页面上做出反馈。这里演示通过返回按钮的背景变化作出反馈
      }
    },

触摸结束

bodyTouchEnd: function(event) {
      // console.log(333);
      if (this.touchStartPointX < this.touchLeft) {
        // 划动结束，重置数据
        this.touchStartPointX = 0;
        this.touchStartPointY = 0;
        // 当划动距离超过100px时，触发返回事件
        // if (this.distanceX > 100) {
        let temp = this.distanceY / this.distanceX;
        // console.log(this.distanceY, this.distanceX, temp);
        if (this.distanceX > 10 && temp < 0.176 && temp > -0.176) {
          // 返回前修改样式，让过渡动画看起来更快
          this.$router.go(-1);
        }
      }
    }