首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

原生js滑动手势

原生 JavaScript 实现滑动手势主要涉及触摸事件(touchstarttouchmovetouchend)的监听和处理。

基础概念

  • 触摸事件:当用户在触摸设备(如手机、平板电脑)上与页面元素进行交互时触发。
  • 事件对象:包含有关触摸事件的详细信息,如触摸点的坐标、触摸点的数量等。

优势

  • 不依赖任何第三方库,减少代码量和加载时间。
  • 更好地控制和定制手势行为。

类型: 常见的滑动手势包括水平滑动、垂直滑动、斜向滑动等。

应用场景

  • 图片轮播的左右切换。
  • 页面的快速滚动。
  • 滑动菜单的展开和收起。

实现示例

代码语言:txt
复制
let startX, startY;

element.addEventListener('touchstart', function(event) {
  const touch = event.touches[0];
  startX = touch.clientX;
  startY = touch.clientY;
});

element.addEventListener('touchend', function(event) {
  const touch = event.changedTouches[0];
  const endX = touch.clientX;
  const endY = touch.clientY;
  const deltaX = endX - startX;
  const deltaY = endY - startY;

  const threshold = 50; // 最小滑动距离
  if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > threshold) {
    if (deltaX > 0) {
      // 向右滑动
      console.log('向右滑动');
    } else {
      // 向左滑动
      console.log('向左滑动');
    }
  } else if (Math.abs(deltaY) > threshold) {
    if (deltaY > 0) {
      // 向下滑动
      console.log('向下滑动');
    } else {
      // 向上滑动
      console.log('向上滑动');
    }
  }
});

可能出现的问题及原因:

  • 手势判断不准确:可能是阈值设置不合理或者计算滑动距离的方式有误。
  • 兼容性问题:在不同设备和浏览器上表现不一致,可能需要针对特定设备或浏览器进行优化。

解决方法:

  • 调整阈值,通过测试找到合适的值。
  • 对不同设备和浏览器进行充分测试,必要时使用特性检测来处理兼容性问题。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

原生JS实现移动端滑动反弹

什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: ? 1. 准备工作 什么是移动端的 Touch事件?...brown">列表十       css部分 在列表的父盒子上设定一个 overflow:hidden属性,使超出盒子部分的列表暂时隐藏掉,后面会通过 js...先来张示意图,怎么通过 js 让列表滑动起来 ?...解决方法: 每一次滑动结束之后,都应该记录下此次滑动的距离,与之前的进行累加,待下一次滑动的时候, ul在 Y轴的偏移值应该是之前的距离加上本次滑动的距离。...,我们参考下图,当列表向上滑动,滑动到列表底部的时候,只要此时再向上滑动,就让它向下反弹。

10.4K20
  • 手机卫士手势滑动切换屏幕

    定义手势识别器 获取手势识别器GestureDetector对象,通过new GestureDetector(context,listener),参数:上下文,监听器 匿名内部类实现简单手势监听器SimpleOnGestureListener...接口,重写onFling()滑动方法 传递进来四个参数: MotionEvent e1 ,MotionEvent e2,velocityX,velocityY e1是第一个点,e2是第二个点,x轴的速度...当第一个点减去第二个点大于200时,我们认为它是从右往左划,下一页 当第二个点减去第一个点大于200时,我们认为它是从左往右划,上一页 调用MotionEvent 对象的getRawX()可以获取到X轴的坐标 使用手势识别器识别手势...重写activity的onTouchEvent()方法,获取到手势在界面上的滑动事件 传递进来一个参数MotionEvent对象 调用GestureDetector对象的onTouchEvent(event...GestureDetector.SimpleOnGestureListener() 抽取公用方法到基类抽象类 BaseSecActivity中,自己的activity只需要继承这个基类,实现上下页的抽象方法,就能实现左右滑动效果

    1.7K20

    iOS 全屏侧滑手势UIScrollViewUISlider间滑动手势冲突

    UIScrollView和全屏侧滑pop返回手势冲突示意图 现象2 、问题1解决后,你会发现拖拽UIScrollView第一页上的UISlider时,向右拖拽时却触发了全屏侧滑pop返回的手势,而UISlider...分析解决问题 1 如果你了解事件的传递和响应链机制的话,应该能想到,是由于UIScrollView的内部手势方法阻断了全屏侧滑返回手势的的响应,那我们就找到这个方法,代码如下 ; 创建一个UIScrollView...//处理UISlider的滑动与UIScrollView的滑动事件冲突 - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {.../* 直接拖动UISlider,此时touch时间在150ms以内,UIScrollView会认为是拖动自己,从而拦截了event,导致UISlider接受不到滑动的event。...但是只要按住UISlider一会再拖动,此时此时touch时间超过150ms,因此滑动的event会发送到UISlider上。

    4.1K20

    Cordova插件开发——滑动手势解锁(iOS篇)

    简单来说,我认为之所以需要插件的支持,一是为了更好的用户体验,比如一个转场动画,可能利用原生代码来实现效果会更好;二是为了利用原生设备的能力,比如你需要用到GPS、蓝牙等等。...在我的业务场景中,我需要给我的应用加上手势解锁的功能。...我想了两种方案,一种是纯前端的方案,即在web页面中嵌入一段js,它负责锁屏界面的显示解锁等功能,是在原有的页面中盖上一层canvas(Demo在此);第二种是用插件的方式,原生代码去控制锁屏的显示等等...接下来到了重头部分了,原生代码开发者欢呼的时刻到了,直接上代码吧: #import #import #import js中传递参数到native来,所以我的这个函数写的特别简单。而实际command里是可以带js传递过来的参数的,你可以从里面取到你想要的参数。

    2.2K10

    Axure最快实现移动端左右滑手势滑动效果

    昨天项目需要做一个手机版的活动页面的原型,其中需要一个商品展示模块,移动版需要左右滑手势的效果,结果想了小半天才想到怎么非常快速的实现这个小功能。接下来说说我的方法,我觉得应该是最快速的办法了。...建立元件如上图:放一个手机模型,中间看好哪里需要做左右手势效果。在这个模块位置,建立三个小模块,这三个小模块就是需要滑动的部分。2. 转换为动态面板这里是一个小重点,大家注意了。...二、第二步弄好元件以后,要开始加事件了,我们先想想最后需要什么效果:三个小模块可以左右滑动,滑动过程内容要跟着一起动;左右滑需要边界,最左侧不能模块最左侧的位置,最右侧也不能低于模块最右侧的位置。

    81520

    Touch 移动设备上的 手势识别 与 Js事件库

    Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具。 Touch.js手势库专为移动设备设计。...(‘#btn-ok’,’tap’,function(ev){ //这里是你想要执行的操作,随便写 }) 上面是一个简单的tap操作,touch.js还支持滑动、缩放等等手势操作,详细的手势事件如下:...2. touch.js支持的手势事件类型: 分类 参数 描述 缩放 pinchstart 缩放手势起点 ~ pinchend 缩放手势终点 ~ pinch 缩放手势 ~ pinchin 收缩 ~ pinchout...放大 旋转 rotateleft 向左旋转 ~ rotateright 向右旋转 ~ rotate 旋 转 滑动 swipestart 滑动手势起点 ~ swiping 滑动中 ~ swipeend...滑动手势终点 ~ swipeleft 向左滑动 ~ swiperight 向右滑动 ~ swipeup 向上滑动 ~ swipedown 向下滑动 ~ swipe 滑动 拖动开始 dragstart 拖动屏幕

    4.1K40

    js书写原生ajax,JS 原生ajax写法

    原生ajax 原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe...… JS原生ajax与Jquery插件ajax深入学习 序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来...jquery插件ajax方法,于是就行了一些总结,因 … js原生Ajax的封装与使用 一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR...原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 2 [代码]JS原生Ajax&comma...;GET和POST javascript/js的ajax的GET请求: Jquery学习笔记(10)–ajax删除用户,使用了js原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦

    15.3K40

    Bootstrap幻灯轮播如何支持触屏左右滑动手势?

    bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以,但有些还是没加入,比如幻灯轮播触屏左右滑动手势就不支持,大家用的设备基本是触屏的了,能用滑动交互在小屏幕上体验会更好,那么如何实现呢...一个比较简单的方法是增加一个滑动手势js插件:hammer.js,网上有很多cdn调用地址,像//cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js,我们在head...Next   关键的步骤来了,我们需要写一个javascript命令调用hammer.js...需要注意的是,jquery版本最好是1.9版本的jquery-1.9.1.min.js,否则可能在电脑上可以实现手势滑动,而在手机上无法触摸滑动   javascript命令这个是关键,不会写不会改就不好玩了

    3.7K50

    「实战」如何用H5实现原生体验的图片预览组件

    | 导语 手Q终端原生的图片预览器支持图片翻页和各种手势,这些用H5怎样实现?...基于alloyFinger,本文将介绍在手Q动漫上的图片预览组件是如何做到媲美原生体验的手势效果,同时也介绍一下关于图片手势效果里隐含的一些细节。希望对要实现手势交互和动画的前端同学有所启发。...类比手Q的AIO里的图片预览器,支持的手势和功能分别如下: 手Q动漫这里之所以没有直接用手Q原生的图片预览器,而是新造一个轮子,主要原因是手Q动漫的图片预览器有一些定制的功能和ui展示,用web来实现更快捷可控一些...二、实现基础 图片预览组件目前是基于alloyFinger.js来做手势支持,transform.js来做CSS3的变换,to.js来做动画的过渡函数。...手势细节-惯性 单指拖动图片然后松开手指时,手Q原生的图片预览器有继续滑动一段距离的惯性效果。 滑动到终点之后,图片真正停在的点是在延长点上。

    3.1K20

    【Flutter 专题】130 图解 DraggableScrollableSheet 可手势滑动的菜单栏

    根据手势操作滑动固定位的菜单栏完成;和尚简单学习一下; ?...可设置宽高比例的容器构建子内容; 案例尝试 1. builder ScrollableWidgetBuilder 构造器作为必选字段,用于在 DraggableScrollableSheet 中显示可滑动的子内容...;其中返回内容需为可滑动的 ScrollableWidget,例如 ListView / GridView / SingleChildScrollView 等; _listWid(controller)...initialChildSize 用于显示初始子 Widgets 所占父 Widget 比例;同时,若返回的子 Widget 未提供 ScrollController,则 DraggableScrollableSheet 不会随手势进行滑动...---- 案例源码 ---- 和尚对 DraggableScrollableSheet 的手势滑动过程还不够熟悉,之后会对手势进行进一步学习;如有错误,请多多指导! 来源:阿策小和尚

    1.4K20
    领券