我有一个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
事件触发有点晚触摸设备上出于某种原因.我在这个问题上卡住了一些天,任何形式的帮助,找出问题将不胜感激.
1条答案
按热度按时间pgky5nke1#
终于找到了答案。问题是样式在移动的设备上相当慢。所以必须在移动的设备上进行GPU加速。只需添加
translate3d(0,0,0)
,这将拉动GPU加速。字符串