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

 更新时间:2021年06月29日 09:01:10   作者:contour  
这篇文章主要为大家详细介绍了vue移动端判断手指在屏幕滑动方向,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

页面

<div
      @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')
    }
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue中v-for通过动态绑定class实现触发效果

    vue中v-for通过动态绑定class实现触发效果

    这篇文章主要介绍了vue中v-for通过动态绑定class实现触发效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • 基于Vue3实现的图片散落效果实例

    基于Vue3实现的图片散落效果实例

    最近工作中遇到一个效果还不错,所以想着实现一下,下面这篇文章主要给大家介绍了关于如何基于Vue3实现的图片散落效果的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • keep-Alive搭配vue-router实现缓存页面效果的示例代码

    keep-Alive搭配vue-router实现缓存页面效果的示例代码

    这篇文章主要介绍了keep-Alive搭配vue-router实现缓存页面效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • vue.js数据绑定的方法(单向、双向和一次性绑定)

    vue.js数据绑定的方法(单向、双向和一次性绑定)

    本篇文章主要介绍了vue.js数据绑定的方法(单向、双向和一次性绑定),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue实现自定义el-table穿梭框功能

    vue实现自定义el-table穿梭框功能

    这篇文章主要介绍了vue实现自定义el-table穿梭框功能,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue中后端做Excel导出功能返回数据流前端的处理操作

    vue中后端做Excel导出功能返回数据流前端的处理操作

    这篇文章主要介绍了vue中后端做Excel导出功能返回数据流前端的处理操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue3的组合式API中使用ref()函数的例子

    Vue3的组合式API中使用ref()函数的例子

    你们是否听说过Vue3的组合式API?它可是Vue3的新玩法,把以前的Vue2组件函数转化为了函数组件。好了,今天我要和大家分享的是如何在组合式API中使用ref()函数,感兴趣的朋友跟随小编一起看看吧
    2023-06-06
  • 聊聊Vue中provide/inject的应用详解

    聊聊Vue中provide/inject的应用详解

    这篇文章主要介绍了聊聊Vue中provide/inject的应用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • element-plus的自动导入和按需导入方式详解

    element-plus的自动导入和按需导入方式详解

    之前使用 ElementPlus 做项目的时候,由于不会使用按需引入耽误了不少时间,这篇文章主要给大家介绍了关于element-plus自动导入和按需导入的相关资料,需要的朋友可以参考下
    2022-08-08
  • Vue.js如何获取data-*的值

    Vue.js如何获取data-*的值

    这篇文章主要介绍了Vue.js如何获取data-*的值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论