angular - 在 Angular 2 中实现滑动导航的最佳方式是什么？

Question

我是 Angular 2 的新手，正在寻找一种方法来为移动用户实现良好的标签触摸滑动导航，并通过滑动过渡到下一个标签 View 。

到目前为止，我找到了一个名为 angular2-useful-swiper 的包尽管我并不热衷于使用它，因为我最终会尽早初始化我的组件，即使它们不在 View 中也是如此。

有人知道为 Angular 2 实现基于选项卡滑动的导航的好方法吗？任何反馈将不胜感激。 :)

Answer 1

对于滑动检测，这里是一个比添加 HammerJS 更简单的解决方案:

在 app.component.html 中:

<div (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')">
  App content here
</div>

在 app.component.ts 中:

private swipeCoord?: [number, number];
private swipeTime?: number;

swipe(e: TouchEvent, when: string): void {
  const coord: [number, number] = [e.changedTouches[0].clientX, e.changedTouches[0].clientY];
  const time = new Date().getTime();

  if (when === 'start') {
    this.swipeCoord = coord;
    this.swipeTime = time;
  } else if (when === 'end') {
    const direction = [coord[0] - this.swipeCoord[0], coord[1] - this.swipeCoord[1]];
    const duration = time - this.swipeTime;

    if (duration < 1000 //
      && Math.abs(direction[0]) > 30 // Long enough
      && Math.abs(direction[0]) > Math.abs(direction[1] * 3)) { // Horizontal enough
        const swipe = direction[0] < 0 ? 'next' : 'previous';
        // Do whatever you want with swipe
    }
  }
}

注意:我尝试了 HammerJS 解决方案，但无法将其配置为忽略鼠标手势，因为您无法直接访问 Hammer 对象。所以选择一些文本会强制导航到下一页...