首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >用HammerJS实现的超文本标记语言元素的拖拽在触摸屏上是抖动的

用HammerJS实现的超文本标记语言元素的拖拽在触摸屏上是抖动的
EN

Stack Overflow用户
提问于 2018-07-08 23:53:22
回答 1查看 962关注 0票数 2

我有一个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事件在触摸设备上触发得有点晚。我被这个问题困扰了几天,如果能帮助我解决这个问题,我们将不胜感激。

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51233705

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档