HammerJS和Angular2无法实现垂直滚动

Question

HammerJS和Angular2无法实现垂直滚动

angularcarouselhammer.js

33

我在使用 HammerJS 和 Angular2 时遇到了问题。

我有一个轮播组件（基于 Angular2 事件处理程序的 Bootstrap 轮播组件），其中我正在监听向左滑动和向右滑动事件。

滑动本身完美地运作。

问题在于，由于我使用了 HammerJS，我无法在我的轮播组件上下滚动，因为它是一个全视口大小的项目，这是一个巨大的问题。

如何解决这个问题？

平台：
Angular2 2.1.2
Android 5.1.1 的 Samsung Galaxy S2
Android Chrome 浏览器: 54.0.2840.85

- user1511408

比如说，在移动设备上尝试向上或向下滚动时，当您的手指起点在图像上时，这也无法正常工作：plunker - user1511408

请添加Chrome版本。由于Google每个月都会推出新版本，因此“最新稳定的移动版”并不值得太多。您使用的是54还是55？因为我刚刚发现55有一个新的Pointer Event API，会破坏很多hammerjs的内容。 - REJH

这是54.0.2840.85。 - user1511408

在使用Angular 8的Ionic 4应用程序上进行了测试 - 这个解决方案可行 ;) - coderpc

5个回答

9

这个解决方案适用于我使用的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 {}

- Sebastian Denis

1

这里可能需要一些解释，会有益于理解。 - pcnate

new Hammer(...) 需要哪个导入？ - Thomas Marti

1

@ThomasMarti 导入 * as Hammer from 'hammerjs'; - Sebastian Denis

这是我的代码：https://github.com/sebastiandenis/GDG-Radzymin/blob/master/src/app/app.module.ts - Sebastian Denis

它似乎可以工作，我认为我的浏览器没有正确刷新。 - Mohy Eldeen

显示剩余2条评论

3

像其他一些答案中提到的那样：

npm install hammerjs --save

maint.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中测试时仍然无法滚动，我不知道是版本的问题还是其他原因，总之它没有起作用。但当我在实际的手机上测试时，滚动是可以正常工作的！

- Eduardo Dennis

1

使用Angular 9的Ionic，不要忘记在app.module.ts中添加以下内容：

import { HammerModule } from '@angular/platform-browser';
imports: [
    ...,
    HammerModule,
  ],

- Nawaz Shareef

1

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

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 {
}

取自这里

- Yuri

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MrCroft · Accepted Answer

明白了！

在你的 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

测试环境：

Windows上的Chrome（Surface设备，真正的触摸屏 - 不只是模拟）v 55.0.2883.87 m（64位）
Android上的Chrome - v 55.0.2883.91