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

Question

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

到目前为止,我已经找到了一个名为angular2-useful-swiper的软件包,虽然我并不热衷于使用它,因为我最终尽早初始化我的组件,即使它们不在视野中.

有谁知道为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对象.所以选择一些文字迫使导航到下一页......

Answer 2

我从 @Elvis Metodiev 答案和 @pikiou 创建了一条指令：

swipe.directive.ts

import { Directive, EventEmitter, HostListener, Output } from '@angular/core';

@Directive({ selector: '[swipe]' })
export class SwipeDirective {

    @Output() next = new EventEmitter<void>();
    @Output() previous = new EventEmitter<void>();

    swipeCoord = [0, 0];
    swipeTime = new Date().getTime();

    constructor() { }

    @HostListener('touchstart', ['$event']) onSwipeStart($event) {
        this.onSwipe($event, 'start');
    }

    @HostListener('touchend', ['$event']) onSwipeEnd($event) {
        this.onSwipe($event, 'end');
    }

    onSwipe(e: TouchEvent, when: string) {
        this.swipe(e, when);
    }

    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 swipeDir = direction[0] < 0 ? 'next' : 'previous';
                if (swipeDir === 'next') {
                    this.next.emit();
                } else {
                    this.previous.emit();
                }
            }
        }
    }
}

旅游.组件.组件.ts

<div
  ...
  swipe
  (next)="onRotateNext()"
  (previous)="onRotatePrevious()"
>
...
</div>

Answer 3

您可以使用HammerJS实现触摸操作,例如,您可以按照此plunker.

包括hammer.js文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>

要么

npm install hammerjs --save

对于使用hammerjs的浏览器触摸支持,包括

 <script src="http://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script>
<script>

在app.module.ts中导入

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

export class MyHammerConfig extends HammerGestureConfig  {
  overrides = <any>{
    'swipe': {velocity: 0.4, threshold: 20} // override default settings
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [{ 
    provide: HAMMER_GESTURE_CONFIG, 
    useClass: MyHammerConfig 
  }] // use our custom hammerjs config
})

例如,plunker链接

要实现标签angular2-material是一个很好的起点,请点击此链接

Answer 4

首先安装Hammerjs和Action触摸动作Polyfill：

$ npm install hammerjs hammer-timejs

然后将导入添加到“ app.module.ts”中，以便使用/打包它们：

import 'hammerjs';
import 'hammer-timejs';

现在，您可以处理动作的事件：
旋转
捏
按下
平移
单击
轻扫

例如，您可以说：

$ npm install hammerjs hammer-timejs

要么：

import 'hammerjs';
import 'hammer-timejs';

参考：https : //saschwarz.github.io/angular2-gestures-slides/#/