#鸿蒙通关秘籍#如何在鸿蒙自定义视图中实现滑动手势切换页面?

HarmonyOS
5天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
温柔余生

在鸿蒙应用中,可以通过PanGesture实现滑动手势切换页面,具体实现步骤如下:

typescript PanGesture(this.panOption) .onActionUpdate((event: GestureEvent) => { if (!this.isStartAction) { this.isStartAction = true; if (event.offsetX < this.judgmentValue) { if (this.currentIndex < this.titleArray.length - this.currentIndexRadix) { let temIndex: number = this.currentIndex + this.currentIndexRadix; this.scroller.scrollToIndex(temIndex, true, ScrollAlign.START); this.wantGoIndex = temIndex; animateTo({ duration: Math.abs(temIndex - this.currentIndex) * this.durationRadix, curve: Curve.EaseInOut, iterations: this.iterationsDefault, playMode: PlayMode.Normal, onFinish: () => { this.currentIndex = temIndex; } }, () => { this.transitionX = this.getTransitionX(temIndex); }) } } else { if (this.currentIndex > this.judgmentValue) { let temIndex: number = this.currentIndex - this.currentIndexRadix; this.scroller.scrollToIndex(temIndex, true, ScrollAlign.START); this.wantGoIndex = temIndex; animateTo({ duration: Math.abs(temIndex - this.currentIndex) * this.durationRadix, curve: Curve.EaseInOut, iterations: this.iterationsDefault, playMode: PlayMode.Normal, onFinish: () => { this.currentIndex = temIndex; } }, () => { this.transitionX = this.getTransitionX(temIndex); }) } } } })

使用PanGesture监听用户的滑动手势,根据滑动方向和距离判断是否切换页面,利用animateTo实现切换效果。


分享
微博
QQ
微信
回复
5天前
相关问题
鸿蒙tablist 如何通过滑动切换页面
6654浏览 • 1回复 待解决