HarmonyOS 鸿蒙Next中Tabs滑动回弹效果
HarmonyOS 鸿蒙Next中Tabs滑动回弹效果 怎么取消Tabs的滑动回弹效果,滑动到第一个或者最后一个的时候,不让Tabs滑动?
3 回复
如下小demo可以达到想要的效果
@Entry
@Component
struct Index {
private controller: TabsController = new TabsController()
@State scrollable:boolean = true
build() {
Tabs({ controller: this.controller }) {
TabContent() {
Text('首页的内容').fontSize(30)
}
.tabBar('首页')
TabContent() {
Text('推荐的内容').fontSize(30)
}
.tabBar('推荐')
TabContent() {
Text('发现的内容').fontSize(30)
}
.tabBar('发现')
TabContent() {
Text('我的内容').fontSize(30)
}
.tabBar("我的")
}
.scrollable(this.scrollable)
.onGestureSwipe((index:number,event:TabsAnimationEvent)=>{
if (index == 0 && event.currentOffset > 0) {
this.scrollable = false
setTimeout(() =>{
this.scrollable = true
},500)
} else if(index == 3 && event.currentOffset < 0) {
this.scrollable = false
setTimeout(() =>{
this.scrollable = true
},500)
}
})
}
}
更多关于HarmonyOS 鸿蒙Next中Tabs滑动回弹效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中,Tabs组件的滑动回弹效果是通过@ohos.arkui.advanced.Tabs
组件实现的。Tabs组件支持横向滑动切换标签页,并且默认带有滑动回弹效果。回弹效果是指在用户滑动到边界时,组件会自动回弹到初始位置,提供更流畅的用户体验。开发者可以通过scrollable
属性控制是否允许滑动,并通过edgeEffect
属性设置滑动到边界时的效果,如spring
(回弹)或fade
(渐变消失)。默认情况下,edgeEffect
设置为spring
,即滑动到边界时会有回弹效果。如果需要自定义回弹效果,可以通过调整相关属性或使用动画组件实现。