博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
单点手势库简单思考实现
阅读量:6273 次
发布时间:2019-06-22

本文共 1075 字,大约阅读时间需要 3 分钟。

单点手势库

分析

  1. 手势是什么?
  2. 有哪些方法实现?

首先我这里指的手势是指我们在移动端进行触屏交互的时候,用户操作的一些手势。

在我们在移动端需要一些交互的时候。难免有时候需要左滑右滑。

目前市面上常见的有两种实现,一种是基于touch事件做判断,一种是自定义事件。

我们接下来使用基于touch时间做判断实现。

首先分析下我们需要的。

  • 长按事件
  • 单击事件
  • 双击事件
  • 上下左右滑动
  • 上下左右滑动中
  • 移除事件,绑定事件

(不知道要不要po代码细节)


main

  1. 单击事件判断 单击事件是很简单的,只要touchStart开始了,我们就可以判断这个事件是单击事件触发了,主要是需要与别的事件互斥,因为只要你触碰到屏幕,在一定程度下都可以认为是一次单击事件
  2. 长按事件判断 单击事件与长按事件的区别是什么。是触碰屏幕进行交互的时间较单击事件事件长,长多少呢?具体的阈值应该可以自控
  3. 双击事件判断 我们知道移动端浏览器会有一个所谓的300ms问题。300ms问题其实就是浏览器需要判断用户这次点击是单击还是双击,我们要做出快速响应~就是在一个时间内,用户是否再点击了屏幕。
  4. 上下左右滑判断 也就是离开屏幕的时候。位置与原坐标进行偏移了。从这个偏移量可以判断,是哪个位置的滑动。
  5. 上下左右滑动时判断 滑动时是什么意思。也就是当我们只是单纯的判断上下左右滑动的话,那么此时我们不能在滑动时候做交互。有一些效果,类似下拉刷新之类的就无法使用了。所以我们还需要添加滑动时。

一些注意的点

上下左右滑动事件判断。

当我们单击的时候,有一定程度上手机做了轻微的偏移量。此时应该有一个兼容范围,用来识别这种操作偏移,而不是用户真正的目的。

滑动中

既然上下左右滑动中事件都有了,那是不是可以有一个滑动中事件。

一些写法。

有绑定事件应该让用户有解绑事件。

绑定是根据元素节点?类名?还是什么绑定。该事件是否要冒泡。
回调函数操作对象包含什么?
解绑事件是什么形式解绑


开始coding

整体规划

首先是一个touch对象。它有on remove事件用于绑定删除元素

观察者模型即可

然后根据传入绑定的dom节点,进行touchStart touchmove touchend 做判断,只是一些逻辑的互斥还有setTimeout延迟用于判断一些复杂手势(长按之类)

是否冒泡的话~应该使用立即传入,因为我们的操作在一定程度上是一种代理。对内部有时候不是必可控,而且还牵扯着一些setTimeout的判断。


end

此次无具体代码。

可以看github地址


总结

  • 这是我挺久之前做的

转载地址:http://oelpa.baihongyu.com/

你可能感兴趣的文章
Canvas && CSS && SVG 三种实现仪表盘的方式
查看>>
简单易懂的谈谈 javascript 中的继承
查看>>
Spark学习之Spark 集群资源调度
查看>>
京东Taro:用技术解放小程序生产力 | 点评家
查看>>
Dart编程语言入门学习
查看>>
小程序登录逻辑
查看>>
vscode透明主题、霓虹灯字体
查看>>
多线程基础知识
查看>>
iOS汇编基础(四)指针和macho文件
查看>>
Laravel 技巧锦集
查看>>
Android 使用 ViewPager+RecyclerView+SmartRefreshLayout 实现顶部图片下拉视差效果
查看>>
Flutter之基础Widget
查看>>
写给0-3岁产品经理的12封信(第08篇)——产品运营能力
查看>>
ArcGIS Engine 符号自动化配置工具实现
查看>>
小程序 · 跳转带参数写法,兼容url的出错
查看>>
开源干货!!!.NET Core + Vue.js(iview-admin) 通用动态权限(RBAC)管理系统框架[DncZeus]开源啦!!!...
查看>>
flutter error
查看>>
Flask框架从入门到精通之模型数据库配置(十一)
查看>>
10年重新出发
查看>>
2019年-年终总结
查看>>