当前位置:编程学习 > > 正文

vue移动端返回在指定位置(vue移动端判断手指在屏幕滑动方向)

时间:2021-10-18 11:17:36类别:编程学习

vue移动端返回在指定位置

vue移动端判断手指在屏幕滑动方向

vue移动端判断手指在屏幕滑动方向,供大家参考,具体内容如下

可以据此实现手指滑屏切换tab的功能,例如京东的订单页,这几个tab切换就可以利用这个实现

vue移动端返回在指定位置(vue移动端判断手指在屏幕滑动方向)

页面

  • <li
          @touchstart="handleTouchstart"
          @touchend="handleTouchend"
          class="slotWrap"
        >
    
  • //屏幕滑动
    //手指按下屏幕
     handleTouchstart(event){
      this.startTime = Date.now()
      this.startX = event.changedTouches[0].clientX
      this.startY = event.changedTouches[0].clientY
    },
    //手指离开屏幕
    handleTouchend(event){
      const endTime = Date.now()
      const endX = event.changedTouches[0].clientX
      const endY = event.changedTouches[0].clientY
      //判断按下的时长
      if(endTime - this.startTime >2000){
        return
      }
      //滑动的方向
      let direction = "";
      //先判断用户滑动的距离,是否合法,合法:判断滑动的方向 注意 距离要加上绝对值
      if(Math.abs(endX -this.startX)>10){
        //滑动方向
        if(Math.abs(endY -this.startY)>30){
          // console.log("y方向偏移太多,不让你滑了")
          return
        }else{
          direction = endX -this.startX >0?"right":"left"
        }
      }else{
        return
      }
      //用户做了合法的滑动操作
      // console.log('方向'+direction)
      if(direction==='left'){
        if(this.currents+1===this.list.length){
          return
        }else{
          this.currents++
          //触发事件
          this.$emit('getData')
        }
      }
      if(direction==='right'){
        if(this.currents===0){
          return
        }else{
          this.currents--
          //触发事件
          this.$emit('getData')
        }
      }
    }
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐