md-swipe-left和md-swipe-right在angularjs的md-tabs上执行相同的功能(仅向左移动) [英] md-swipe-left and md-swipe-right is doing same functionality (moving only left) on md-tabs in angularjs

问题描述

在此处输入图像描述角度材料的md-tabs滑动功能无法正常工作也就是说，有两种方式.它对于左操作正常，但是当我向右滑动时，左功能启动了.

在这里.我使用移动模式打开网站.因此，滑动操作与箭头按钮单击事件配合良好.但是当我在选项卡上滑动时，它可以向左滑动，但在向右滑动时，它的功能与向左滑动相同

解决方案

该问题是由于"pointerevents" API引起的.当浏览器默认将触摸事件自身处理为平移，缩放等事件时，将触发"pointercancel"事件.角材料处理其触摸的方式，将"pointerdown-pointercancel"事件视为"pointerdown-pointerup".因此，向下滚动或向任意方向滑动会立即触发"pointerdown-pointerup"，导致框架将其检测为向左滑动.

解决方案1 ​​

应用css规则:

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

这将正确检测滑动方向. 但是您将面临另一个问题.向上/向下滚动将导致选项卡更改！

解决方案2

不听指针事件.鼠标和触摸事件在台式机和手机上就足够了.

您将不得不更改棱角材料代码. 如果使用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

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

解决方案

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

这篇关于md-swipe-left和md-swipe-right在angularjs的md-tabs上执行相同的功能(仅向左移动)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！