web-dev-qa-db-ja.com

Angular 2でスワイプナビゲーションを実装する最良の方法は何ですか？

Angular 2が初めてで、次のタブビューへのスワイプトランジションを使用して、モバイルユーザー向けの優れたタブタッチスワイプナビゲーションを実装する方法を探しています。

これまでのところ、 angular2-useful-swiper というパッケージを見つけました。ただし、コンポーネントが表示されていなくても、コンポーネントを早期に初期化してしまうため、使用することに熱心ではありません。

Angular 2？のタブスワイプベースのナビゲーションを実装する良い方法を知っている人はいますか？フィードバックは大歓迎です：）

angularnavigationswipe-gesture
12
Jonathan002

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でのブラウザータッチサポートには、include

 <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
})

たとえば、プランカリンク

タブを実装するにはangular2-materialは開始するのに適した場所です。 このリンク に従ってください

9
Rohit Vinay

ここでのスワイプ検出については、HammerJSを追加するよりも簡単なソリューションです。

app.component.htmlで：

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

in 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オブジェクトに直接アクセスできないため、マウスジェスチャを無視するように構成することはできません。したがって、テキストを選択すると、次のページへのナビゲーションが強制されます...

53
pikiou

最初にhammerjsとアクションタッチアクションポリフィルをインストールします。

_$ npm install hammerjs hammer-timejs
_

次に、インポートを「app.module.ts」に追加して、それらが使用/バンドルされるようにします。

_import 'hammerjs';
import 'hammer-timejs';
_

これで、アクションのイベントを処理できます。
回転
ピンチ
押す
パン
タップ
スワイプ

たとえば、あなたは言うことができます：

<li *ngFor="let employee of employeesList;" (swiperight)="myswiperight(employee)" (swipeleft)="myswipeleft(employee)">

または：

<div (panstart)="onPanStart($event)" (panmove)="onPan($event)">

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

4
Hany