垂直滚动不适用于 HammerJS 和 Angular2

Posted 2023-02-16

【中文标题】垂直滚动不适用于 HammerJS 和 Angular2

【英文标题】：Vertical scroll is not working with HammerJS and Angular2

【发布时间】：2017-04-22 09:08:58

【问题描述】：

我在使用带有 Angular2 的 HammerJS 时遇到问题。 我有一个轮播（基于带有 Angular2 事件处理程序的引导轮播），我正在收听 向左滑动 和 向右滑动 事件。 滑动本身可以完美运行。 问题是，由于我使用 HammerJS，我无法在轮播组件上向上/向下滚动，而且因为它是一个完整的视口大小的项目，所以这是一个大问题。

如何解决这个问题？

平台： Angular2 2.1.2 三星 Galaxy S2 与 android 5.1.1 Android 版谷歌浏览器：54.0.2840.85

【问题讨论】：

例如，当您尝试向上或向下滚动以使您的手指起点位于图像上时，这在移动设备上也不起作用：plunker

请添加 Chrome 版本。谷歌每个月都会推出一个新版本，“最新的稳定手机”已经不值钱了。你是54还是55？因为我刚刚发现 55 有一个新的 Pointer Event api，它破坏了很多hammerjs 的东西。

54.0.2840.85

在 Ionic 4 应用上测试，使用 Angular 8 - 这个solution 工作;)

【参考方案1】：

知道了！

在您的 AppModule 中：

import  HAMMER_GESTURE_CONFIG, HammerGestureConfig  from '@angular/platform-browser';

export class MyHammerConfig extends HammerGestureConfig 
    overrides = <any> 
        'pinch':  enable: false ,
        'rotate':  enable: false 
    


@NgModule(
    declarations: [
        // ...
    ],
    imports: [
        // ...
    ],
    providers: [
        // ...
        
            provide: HAMMER_GESTURE_CONFIG,
            useClass: MyHammerConfig
        
    ],
    bootstrap: [ AppComponent ]
)
export class AppModule 

在禁用pinch 和rotate 后，现在可以垂直滚动了。 到目前为止找不到任何其他方法。我不确定pinch 和rotate 事件会发生什么（我认为它们会被禁用）。但即使没有这个配置，附加一个(pinch)="onPinch($event)" - 也没有做任何事情。

我项目中的 Angular 版本：2.4.1

测试日期：

Chrome for Windows（在 Surface 上，所以真正的触摸屏 - 不仅仅是模拟）v 55.0.2883.87 m（64 位） Chrome for Android - v 55.0.2883.91

【讨论】：

您好，感谢您的解决方案。我认为它适用于 55 以下的 chrome 版本。它适用于模拟器，但我的手机现在在 Chrome 55 上。你是否知道我们如何让hammerjs 在 Chrome 55 上运行？

在 Surface（所以，Windows）上，我有 Chrome 55.0.2883.87 m（64 位）。但是，也许在 Android 或 ios 上是不同的故事？等我修好我的手机后让我检查一下（我试图在我的三星上放一个自定义 ROM 并把它弄坏了 - 需要一段时间才能弄清楚并修复它），然后再给你一条评论。

@user1511408 - 刚刚在 Chrome for Android 上进行了测试（v 55.0.2883.91）。它工作得很好。

@MrCroft 非常感谢。

绝妙的答案！我已经在这个问题上苦苦挣扎了一个星期。我正在使用 Ionic 4、Angular 8，您的回答按预期工作。我正在使用 Hammer.js 的swipeLeft 功能，它阻止了我的应用程序的垂直滚动功能。现在，我已经成功了；）

【参考方案2】：

此解决方案适用于我的 Chrome 66（Angular 6 应用）。启用滚动，向右/向左滑动也可以：

import 
  HammerGestureConfig,
  HAMMER_GESTURE_CONFIG
 from '@angular/platform-browser';
import * as Hammer from 'hammerjs';

export class MyHammerConfig extends HammerGestureConfig 
  buildHammer(element: htmlElement) 
    const mc = new Hammer(element, 
      touchAction: 'pan-y'
    );

    return mc;
  


@NgModule(
    declarations: [
        // ...
    ],
    imports: [
        // ...
    ],
    providers: [
        // ...
        
            provide: HAMMER_GESTURE_CONFIG,
            useClass: MyHammerConfig
        
    ],
    bootstrap: [ AppComponent ]
)
export class AppModule 

【讨论】：

这里稍微解释一下可能会有所帮助

这对我很有用，在 Android Chrome 68.03440.91 上测试过，最新的 angular 6.1 似乎它覆盖了 buildHammer 方法只关心 pan-y 方向。这种方式可以毫无问题地使用滑动和滚动。非常感谢。

new Hammer(...) 需要导入什么？

@ThomasMarti import * as Hammer from 'hammerjs';

这是我的代码：github.com/sebastiandenis/GDG-Radzymin/blob/master/src/app/…

【参考方案3】：

就像在

中提到的其他一些答案一样

npm install hammerjs --save

ma​​int.ts

import 'hammerjs';

app.module

import  BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG  
from '@angular/platform-browser';
...
export class HammerConfig extends HammerGestureConfig 
  overrides = <any> 
      'pinch':  enable: false ,
      'rotate':  enable: false 
  

...
  providers: [
    
      provide: HAMMER_GESTURE_CONFIG,
      useClass: HammerConfig
    ],
...

我尝试了一百万种配置变化，当我在 chrome 中测试时滚动仍然不起作用，我不知道它是版本还是什么，但它不起作用。当我在实际的手机中进行测试时，滚动是有效的！

【参考方案4】：

ionic 角度为 9 不要忘记添加 在 app.module.ts 中

从'@angular/platform-b​​rowser'导入 HammerModule ； 进口：[ ..., 锤子模块， ],

【参考方案5】：

经过 2 天的研究和挫折，我找到了唯一可行的解​​决方案：

import  HammerGestureConfig, HAMMER_GESTURE_CONFIG  from '@angular/platform-browser';

export class CustomHammerConfig extends HammerGestureConfig  
    overrides = <any>
        'pinch':  enable: false ,
        'rotate':  enable: false 
    



@NgModule(
// ... declarations, imports,
providers: [
        // ...
        
            provide: HAMMER_GESTURE_CONFIG,
            useClass: CustomHammerConfig
        
    ],
bootstrap: [ AppComponent ]
)
export class AppModule 

取自here