前端组件化系列目录
- 「一」用 JSX 建立组件 Parser(解析器)
- 「二」使用 JSX 建立 Markup 组件风格
- 「三」用 JSX 实现 Carousel 轮播组件
- 「四」用 JavaScript 实现时间轴与动画
- 「五」用 JavaScript 实现手势库 - 实现监听逻辑
- 「六」用 JavaScript 实现手势库 — 手势逻辑 《 本期 》
- … 待续 …
上一期《实现监听逻辑》中我们一起实现了基础的手势监听逻辑。有了这些手势的监听后,我们就可以开始实现每一个手势的逻辑。最终我们可以把这些手势应用到我们的《轮播图组件》当中。
接下来我们就开始实现 gesture 的逻辑。
Start 事件
首先我们会触发一个 start 事件,也就是当我们手指触摸到屏幕时第一个触发的事件。这时会有三种情况:
- 手指松开
- 会触发 end 事件,这样就构成一个
tap
点击的行为 - 通过监听 end 事件来实现即可
- 会触发 end 事件,这样就构成一个
- 手指拖动超过 10 px
- 这种就是
pan start
拖动的行为 - 我们可以在 move 事件判断当前与上一个触点的距离
- 这种就是
- 手指停留在当前位置超过 0.5s
- 这种就是
press start
按压的行为 - 我们可以添加一个 setTimeout 来实现
- 这种就是
Press 事件
所以我们第一步就是在 start
函数中加入一个 setTimout
的 handler 处理程序。
let handler;
let start = point => {
handler = setTimeout(() => {
console.log('presss ');
}, 500);
};
一般来说 press
是我们比较常见的一个行为。但是实际上这里是 press start 事件,后面还会跟随着一个 press end 的事件