md-swipe-left и md-swipe-right выполняют ту же функциональность (перемещение только слева) на md-вкладках в angularjs

Question

enter image description here Функция md-tabs углового материала не работает должным образом, то есть двумя способами. для левой, но когда я сажусь вправо, левая функциональность стреляет.

Здесь. Я открываю сайт с мобильным режимом. поэтому прокрутка хорошо работает при нажатии кнопки со стрелкой. но когда я сажусь на вкладках для левого салфетки, он работает, но для правильного салфетки он выполняет ту же функциональность, что и левый салфетка.

Answer 1

Проблема вызвана API-интерфейсом pointerevents. Событие «pointercancel» запускается, когда браузер по умолчанию обрабатывает события касания как панорамирование, масштабирование и т. Д. Сам по себе. Как угловой материал обрабатывает свои касания, событие «pointerdown-pointercancel» рассматривается как «pointerdown-pointerup». Таким образом, прокрутка вниз или прокрутка в любом направлении немедленно вызовет «pointerdown-pointerup», в результате чего инфраструктура обнаружит ее как левую.

Решение 1

Применение правила CSS:

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

Это правильно определяет направление салфетки. Но у вас будет другая проблема. Прокрутка вверх/вниз приведет к изменению вкладок!

Решение 2

Не слушайте pointerevents. Мышь и сенсорные события хватит на настольных компьютерах и мобильных телефонах.

Вам нужно будет внести изменения в код углового материала. При использовании углового-material.js файла, Измените следующее:

// 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'; 

To:

// 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'; 

Вопрос признан и остается открытым. Вот дискуссия: https://github.com/angular/material/issues/10145

Answer 2

Расширение Devesh Sati «s answer:

если вы используете угловую-material.min.js,

заменить

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

с

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

просто удалить события указателя т.е. pointerdown, pointermove, pointerup, pointercancel