用 JavaScript 实现手势库 — 手势逻辑【前端组件化】

前端组件化系列目录

• 「一」用 JSX 建立组件 Parser（解析器）
• 「二」使用 JSX 建立 Markup 组件风格
• 「三」用 JSX 实现 Carousel 轮播组件
• 「四」用 JavaScript 实现时间轴与动画
• 「五」用 JavaScript 实现手势库 - 实现监听逻辑
• 「六」用 JavaScript 实现手势库 — 手势逻辑 《 本期 》
• … 待续 …

---

上一期《实现监听逻辑》中我们一起实现了基础的手势监听逻辑。有了这些手势的监听后，我们就可以开始实现每一个手势的逻辑。最终我们可以把这些手势应用到我们的《轮播图组件》当中。

接下来我们就开始实现 gesture 的逻辑。

---

Start 事件

首先我们会触发一个 start 事件，也就是当我们手指触摸到屏幕时第一个触发的事件。这时会有三种情况：

• 手指松开
  • 会触发 end 事件，这样就构成一个 tap 点击的行为
  • 通过监听 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 的事件