Ionic 用HammerJS实现的拖动HTML元素在触摸设备上抖动

jfewjypa  于 2023-11-15  发布在  Ionic
关注(0)|答案(1)|浏览(200)

我有一个HTML元素列表,这些元素像卡片一样堆叠在一起。我试图使用HammerJS拖动pan事件的元素

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


这在浏览器中很顺利,但在触摸设备上它的抖动.但如果我从css中删除position: absolute它在触摸设备上也很顺利,但卡不堆叠在对方的顶部.我只是觉得panmove事件触发有点晚触摸设备上出于某种原因.我在这个问题上卡住了一些天,任何形式的帮助,找出问题将不胜感激.

pgky5nke

pgky5nke1#

终于找到了答案。问题是样式在移动的设备上相当慢。所以必须在移动的设备上进行GPU加速。只需添加translate3d(0,0,0),这将拉动GPU加速。

this.renderer.setStyle(elem,"transform",`translate3d(0, 0, 0) translate(${xtranslate}px,${ytranslate}px)`)

字符串

相关问题