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