Angular 2が初めてで、次のタブビューへのスワイプトランジションを使用して、モバイルユーザー向けの優れたタブタッチスワイプナビゲーションを実装する方法を探しています。
これまでのところ、 angular2-useful-swiper というパッケージを見つけました。ただし、コンポーネントが表示されていなくても、コンポーネントを早期に初期化してしまうため、使用することに熱心ではありません。
Angular 2?のタブスワイプベースのナビゲーションを実装する良い方法を知っている人はいますか?フィードバックは大歓迎です:)
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
は開始するのに適した場所です。 このリンク に従ってください
ここでのスワイプ検出については、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オブジェクトに直接アクセスできないため、マウスジェスチャを無視するように構成することはできません。したがって、テキストを選択すると、次のページへのナビゲーションが強制されます...
最初に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)">