Question

我正在用Ionic编写一个应用程序，并使用Hammer.js进行平移手势（目前仅此一个）。在浏览器（chrome和safari）中，这在Android设备上也能正常工作，但我发现平移手势在iOS上不起作用（既不是真实设备也不是模拟器）。经过很长时间的研究，我找不到使它起作用的方法。 pan和panend都不起作用（单击即可）。

注意：事件是（应该）从自定义组件而不是页面本身启动的。

我见过其他有类似问题的人，但是没有适合我的解决方案。最终Here表示Hammerjs与iOS不太兼容，但here表示。 This guy似乎有类似的问题，但未找到解决方案。我还尝试将以下代码和提供程序{provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig}添加到我的app.module.ts中。没有成功。

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

export class MyHammerConfig extends HammerGestureConfig {
    overrides = <any> {
        'pan': {
            enable: true,
            direction: Hammer.DIRECTION_HORIZONTAL
        }
    };
}

他是我的代码（摘录）：

export class SeekbarQuantizedComponent implements OnInit, OnChanges {
    private stepsPositions: number[]; // Will have the position of the different steps (in %)
    private progress = 0; // The progress of the progressbar in %

[...]

    onClick($event: MouseEvent) {
        const clickX = $event.offsetX * 100 / this.background.nativeElement.offsetWidth;
        this.setProgress(clickX);

        this.valueSelected.emit(this.selectedPosition);
    }

    onPan($event) {
        this.setProgress(100 * ($event.changedPointers[0].offsetX / this.background.nativeElement.offsetWidth));
    }

    onPanEnd($event) {
        this.setProgress(100 * ($event.changedPointers[0].offsetX / this.background.nativeElement.offsetWidth));
        this.valueSelected.emit(this.selectedPosition);
    }

[...]
}

html：

<div #background class="progress-outer"
     (click)="onClick($event)"
     (pan)="onPan($event)"
     (panend)="onPanEnd($event)">
    <div class="progress-inner"
         [style.width]="progress + '%'">
        {{text}}
    </div>
</div>

HammerJS pan无法在iOS上运行（在Ionic下）

0 个答案: