手机端触屏事件touchstart、touchmove、touchend

最新推荐文章于 2024-08-03 14:53:27 发布

qq_27449993

最新推荐文章于 2024-08-03 14:53:27 发布

阅读量1.2k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_27449993/article/details/89488255

版权

前端专栏收录该内容

113 篇文章 2 订阅

订阅专栏

 data () {
    return {
      scalImgShow: -1,
      touchX: 0,
      touchY: 0,
      touchZ: 0
    }

<li v-for="(item, index) in ImageList" :key="index" v-show="index == scalImgShow" @touchstart="touchstartFun($event)" @touchmove="touchmoveFun($event,index)" @touchend="touchendFun($event,index)">
  <img  :src="item" >
</li>

 touchendFun (e, item, index) {
      if (this.touchZ !== 1) {
        this.touchX = 0
        this.touchY = 0
        debugger
      } else if (this.touchZ === 1) {
        this.touchX = 0
        this.touchY = 0
        this.touchZ = 0
        // this.delectList = true
        /* 到这里已确定触发了长按事件，接下来执行长按后要做的其他事情 */
      }
    },
    touchmoveFun (e, index) {
      // debugger
      var moveEndX = e.changedTouches[0].pageX
      var X = this.touchX - moveEndX
      debugger
      if (X > 40) { // 左滑
        this.touchZ = 1
        this.scalImgShow = ((index + 1) === this.ImageList.length) ? 0 : (index + 1)
        return false
        // alert(X)
      } else if (X < -10) { // 右滑
        this.touchZ = 1
        this.scalImgShow = ((index - 1) === -1) ? (this.ImageList.length - 1) : (index - 1)
        return false
      } else {
        this.touchZ = 1
      }
      if (this.touchX !== e.touches[0].clientX || this.touchY !== e.touches[0].clientY) {
        return false
      }
    },
    touchstartFun (e) {
      if (e.touches.length > 1) {
        return false
      }
      this.touchZ = 0
      let that = this
      this.timeOutEvent = setTimeout(() => {
        that.touchZ = 1
      }, 2000)
      this.touchX = e.touches[0].clientX
      this.touchY = e.touches[0].clientY
    }