时间戳

首页 > 解决方案 > 拖动 HTML 元素，用 HammerJS 实现，在触摸设备上很紧张

angular - 拖动 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)`);
  }
}

主页.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>

主页.scss

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

这在浏览器中运行顺利，但在触摸设备上它很紧张。但是，如果我 position: absolute从 css 中删除它也可以在触摸设备上顺利运行，但卡片不会堆叠在一起。我只是觉得由于panmove某种原因，该事件在触摸设备上触发的时间有点晚。我在这个问题上停留了几天，任何解决问题的帮助将不胜感激。

标签： angularionic-frameworkhammer.js

解决方案

终于找到了答案。问题是移动设备上的造型非常缓慢。所以不得不在移动设备上做GPU加速。只需添加translate3d(0,0,0)这将拉动 GPU 加速。

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

推荐阅读