问题
enter image description hereangular material's md-tabs swiping functionality is not working properly i.e in two ways .It is working fine for left but when i swipe to right , left functionality is firing.
Here. I open site with mobile mode. so the swiping is working well with arrow button click event. but when i swipe on the tabs for left swipe it is working but for right swipe also it is doing same functionality as left swipe
回答1:
The issue is caused due to 'pointerevents' API. The 'pointercancel' event is fired when a browser defaults to handling touch events as pan,zoom,etc by itself. The way angular-material handles its touches, a 'pointerdown-pointercancel' event is treated as 'pointerdown-pointerup'. So scrolling down or swiping in any-direction will trigger a 'pointerdown-pointerup' immediately, causing the framework to detect it as a left-swipe.
Solution 1
Apply the css rule:
md-tabs-content-wrapper, [md-swipe-left], [md-swipe-right] { touch-action: pan-y; }
This will correctly detect the swipe direction. But you will face another problem. Scrolling up/down will cause the tabs to change !!
Solution 2
Do not listen to pointerevents. Mouse and touch events will suffice on desktops and mobiles.
You will have to make changes in angular material code. If using the angular-material.js file, Change the following:
// 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';
The issue is recognized and still open. Here's the discussion: https://github.com/angular/material/issues/10145
回答2:
Expansion of Devesh Sati's answer:
if you're using angular-material.min.js,
replace
var v="mousedown touchstart pointerdown",E="mousemove touchmove pointermove",$="mouseup mouseleave touchend touchcancel pointerup pointercancel";
with
var v="mousedown touchstart",E="mousemove touchmove",$="mouseup mouseleave touchend touchcancel";
just remove pointer events i.e.
pointerdown,pointermove,pointerup,pointercancel
来源：https://stackoverflow.com/questions/41567668/md-swipe-left-and-md-swipe-right-is-doing-same-functionality-moving-only-left