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

问题描述

在此处输入图像描述angular material 的 md-tabs 滑动功能无法正常工作即有两种方式.它在左侧工作正常，但当我向右滑动时，左侧功能正在触发.

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

推荐答案

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

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.

解决方案 1

应用css规则:

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 !!

解决方案 2

不要听pointerevents.鼠标和触摸事件在台式机和移动设备上就足够了.

Do not listen to pointerevents. Mouse and touch events will suffice on desktops and mobiles.

您将不得不更改角度材料代码.如果使用 angular-material.js 文件，更改以下内容:

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

致:

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

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屋！