Я программирую приложение на 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>