web-dev-qa-db-fra.com

Quelle est la meilleure façon d'implémenter la navigation par balayage dans Angular 2?

Je suis nouveau sur Angular 2 et je cherche un moyen de mettre en œuvre une bonne navigation par balayage tactile pour les utilisateurs mobiles avec une transition par balayage vers la vue de l'onglet suivante.

Jusqu'à présent, j'ai trouvé un package appelé angular2-utile-swiper bien que je ne veuille pas l'utiliser car je finis par initialiser mes composants tôt même s'ils ne sont pas en vue.

Quelqu'un connaît-il un bon moyen de mettre en œuvre une navigation basée sur un balayage d'onglet pour Angular 2? Tout commentaire sera grandement apprécié.:)

angularnavigationswipe-gesture
12
Jonathan002

Vous pouvez utiliser HammerJS pour implémenter des actions tactiles, Vous pouvez suivre cela plunker par exemple.

Inclure le fichier hammer.js 

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

ou

npm install hammerjs --save

Pour la prise en charge tactile du navigateur avec hammerjs, incluez 

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

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

lien plunker par exemple

Pour implémenter des onglets angular2-material est un bon point de départ, suivez ce lien

9
Rohit Vinay

Pour la détection de balayage, voici une solution plus simple que d'ajouter HammerJS:

Dans app.component.html:

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

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

Remarque: J'ai essayé la solution HammerJS mais la configurer pour ignorer les gestes de la souris était impossible car vous n'avez pas d'accès direct à l'objet Hammer. Donc, sélectionner du texte forçait la navigation vers la page suivante ...

53
pikiou

Installez d'abord les marteaux et le polyfill à action tactile:

$ npm install hammerjs hammer-timejs

Ajoutez ensuite les importations à 'app.module.ts' afin qu'elles soient utilisées/regroupées:

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

Vous pouvez maintenant gérer les événements des actions:
Tourner
Pincer
Presse
La poêle
Robinet
Glissez

Par exemple, vous pouvez dire:

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

Ou:

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

Référence: https://saschwarz.github.io/angular2-gestures-slides/#/

4
Hany