md-swipe-left和md-swipe-right在angularjs中的md-tabs上执行相同的功能（仅向左移动）

Question

enter image description hereangular材料的md-tabs滑动功能无法正常工作，即两种方式。它对左侧工作正常但是当我向右滑动时，左侧功能正在触发。

这里。我用移动模式打开网站。因此，使用箭头按钮单击事件可以很好地滑动。但是当我在左侧滑动的标签上滑动时它正在工作，但是为了正确滑动它也可以执行与左滑动相同的功能

Answer 1

该问题是由'pointerevents'API引起的。当浏览器默认将触摸事件处理为平移，缩放等时，会触发“pointercancel”事件。 angular-material处理其触摸的方式，'pointerdown-pointercancel'事件被视为'pointerdown-pointerup'。因此向下滚动或向任意方向滑动将立即触发“指针向下指针”，导致框架将其检测为左向滑动。

解决方案1

应用css规则：

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

这将正确检测滑动方向。但是你将面临另一个问题。向上/向下滚动将导致标签发生变化！

解决方案2

不要听pointerevents。桌面和手机上的鼠标和触摸事件就足够了。

您必须更改角度材料代码。如果使用angular-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';

至：

// 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的answer：

如果你正在使用angular-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