Перетаскивание HTML-элемента, реализованного с помощью HammerJS, неудобно на сенсорном устройстве

У меня есть список элементов HTML как карты, уложенные друг на друга. Я пытаюсь перетащить элемент с panпомощью событияHammerJS

export class HomePage {
  @ViewChildren('slides') slides;
  @ViewChild('stack') stack;
  constructor(    
    this.cards = [1,2,3,4,5]
  }
  ngAfterViewInit(){
    let hammer = new Hammer.Manager(this.stack.nativeElement, {  preventDefault: true,
      recognizers: [      [ Hammer.Pan, { threshold: 2 }] ]
    });
    hammer.get('pan').set({ direction: window['Hammer'].DIRECTION_ALL });
    this.element = this.slides.first.nativeElement;
    hammer.on('panmove', (ev) => {
      this.handlePan(ev);
    });
  }
  handlePan(
    let deltaX = ev.deltaX;
    let deltaY = ev.deltaY;
    this.renderer.setStyle(this.element, 'transform',`translate(${deltaX}px,${deltaY}px)`);
  }
}

home.html

<ion-content  >
  <div #stack class="stack">
  <ion-card *ngFor = "let c of cards" #slides >
    <ion-card-content>
      c
    </ion-card-content>
  </ion-card>
  </div>
</ion-content>

home.scss

  ion-card{
    position: absolute;
    height: 400px;
  }

Это работает плавно в браузере, но на сенсорных устройствах это неудобно. Но если я удалю position: absoluteиз css, он работает плавно и на сенсорных устройствах, но карты не сложены друг на друга. Я просто чувствую, что panmoveпо какой-то причине событие вызвано небольшим запозданием на сенсорных устройствах. Я застрял в этой проблеме в течение нескольких дней, любая помощь в выяснении проблемы будет оценена по достоинству.

angular,ionic-framework,hammer.js,

1

Ответов: 1


0 принят

Наконец нашел ответ. Проблема в том, что стилизация на мобильных устройствах довольно медленная. Так что нужно сделать ускорение GPU в мобильных устройствах. Просто добавьте, translate3d(0,0,0)что будет тянуть ускорение GPU.

this.renderer.setStyle(elem,"transform",`translate3d(0, 0, 0) translate(${xtranslate}px,${ytranslate}px)`)
угловой, ионно-рамочный, hammer.js,
Похожие вопросы