Панорамирование HammerJS не работает на iOS (под Ionic) - PullRequest
0 голосов
/ 10 июля 2019

Я программирую приложение на Ionic и использую hammer.js для жеста панорамирования (на данный момент только этот).В браузере (Chrome и Safari) это работает нормально, в том числе на устройствах Android, но я только что обнаружил, что жест панорамирования не работает на iOS (ни на реальном устройстве, ни на эмуляторе).После долгого исследования я не могу найти способ заставить его работать.Ни pan, ни panend не работают (щелчок работает).

Примечание. События запускаются (должны быть) из пользовательского компонента, а не самой страницы.

Я видел других с похожими проблемами, но у меня нет решения, которое бы сработало. Здесь наконец заявлено, что hammerjs не очень совместим с iOS, но здесь говорит это. Этот парень , похоже, имеет подобную проблему, но не нашел решения.Я также попытался добавить в свой app.module.ts следующий код и провайдера {provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig}.Безуспешно.

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

Hier - это (фрагмент) моего кода:

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...