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,即滑动到边界时会有回弹效果。如果需要自定义回弹效果,可以通过调整相关属性或使用动画组件实现。

在HarmonyOS(鸿蒙)中,Tabs组件的滑动回弹效果可以通过TabContentScrollView等组件结合实现。通过在ScrollView中设置edgeEffect属性为spring,当用户滑动到边界时,系统会自动应用回弹效果。同时,可以通过onScroll事件监听滑动位置,动态调整Tabs的选中状态。开发者还可以使用Animation组件自定义回弹动画,进一步提升用户体验。

回到顶部