md-swipe-left et md-swipe-right font la même fonctionnalité (se déplacer uniquement à gauche) sur md-tabs dans angularjs

Question

enter image description here La fonctionnalité de balayage de md-onglets de matériau angulaire ne fonctionne pas correctement, à savoir de deux façons. Il fonctionne très bien pour gauche mais quand je balaye vers la droite, la fonctionnalité gauche est en train de tirer.

Ici. J'ouvre le site avec le mode mobile. donc le balayage fonctionne bien avec l'événement de clic de bouton de flèche. mais quand je glisse sur les onglets pour le balayage vers la gauche, il fonctionne mais pour le balayage vers la droite, il fait la même fonctionnalité que le balayage gauche

Answer 1

Le problème est dû à l'API 'pointerevents'. L'événement 'pointercancel' est déclenché lorsqu'un navigateur utilise par défaut des événements tactiles comme le panoramique, le zoom, etc. La façon dont le matériau angulaire gère ses contacts, un événement 'pointerdown-pointercancel' est traité comme 'pointerdown-pointerup'. Donc, faire défiler vers le bas ou balayer dans n'importe quelle direction déclenchera immédiatement un 'pointerdown-pointerup', ce qui fera que le framework le détectera comme un balayage vers la gauche.

Solution 1

Appliquer la règle css:

md-tabs-content-wrapper, [md-swipe-left], [md-swipe-right] { touch-action: pan-y; } 

Cela détecter correctement la direction de balayage. Mais vous allez faire face à un autre problème. Défiler vers le haut/bas fera changer les onglets !!

Solution 2

Ne pas écouter pointerevents. Les événements souris et tactile suffiront sur les ordinateurs de bureau et mobiles.

Vous devrez apporter des modifications au code de matériau angulaire. Si vous utilisez le fichier angulaire material.js, Modifier les éléments suivants:

// Listen to all events to cover all platforms. 
var START_EVENTS = 'mousedown touchstart pointerdown'; 
var MOVE_EVENTS = 'mousemove touchmove pointermove'; 
var END_EVENTS = 'mouseup mouseleave touchend touchcancel pointerup pointercancel'; 

Pour:

// Listen to all events to cover majority of platforms. 
var START_EVENTS = 'mousedown touchstar'; 
var MOVE_EVENTS = 'mousemove touchmoev'; 
var END_EVENTS = 'mouseup mouseleave touchend touchcancel'; 

La question est reconnue et toujours ouverte. est ici la discussion: https://github.com/angular/material/issues/10145

Answer 2

Expansion des answer de Devesh Sati:

si vous utilisez-material.min.js angulaire,

remplacer

var v="mousedown touchstart pointerdown",E="mousemove touchmove pointermove",$="mouseup mouseleave touchend touchcancel pointerup pointercancel"; 

avec

var v="mousedown touchstart",E="mousemove touchmove",$="mouseup mouseleave touchend touchcancel"; 

supprimer simplement les événements de pointeur dire pointerdown, pointermove, pointerup, pointercancel