HarmonyOS 鸿蒙Next tab实现自动滚动效果

发布于 1周前 作者 htzhanglong 来自 鸿蒙OS

HarmonyOS 鸿蒙Next tab实现自动滚动效果

tab实现自动滚动效果

Harmonyos Next教程
2 回复
使用默认TabBar和自定义TarBar实现会有所不同，参考文档：选项卡 (Tabs)-构建布局-开发布局-UI开发 (ArkTS声明式开发范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)

下面两个示例参考。

【TabBar默认样式】使用onChange事件

深色代码主题
复制
/ xxx.ets
@Entry
@Component
struct TabsOpaque {
  private controller: TabsController = new TabsController()
  // [@State](/user/State) selfFadingFade: boolean = true;
  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar('pink')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)
        }.tabBar('yellow')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar('blue')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Brown)
        }.tabBar('brown')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Red)
        }.tabBar('red')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Orange)
        }.tabBar('orange')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Gray)
        }.tabBar('grey')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')
      }
      .vertical(false)
      .scrollable(true)
      .barMode(BarMode.Scrollable)
      .barHeight(80)
      .animationDuration(400)
      .onChange((index: number) => {
      })
      // .fadingEdge(this.selfFadingFade)
      .height('30%')
      .width('100%')
    }
    .padding({ top: '24vp', left: '24vp', right: '24vp' })
  }
}

【自定义TabBar样式】使用TabsController的changeIndex方法

深色代码主题
复制
@Entry
@Component
struct TabsExample {
  @State currentIndex: number = 0;
  private tabsController: TabsController = new TabsController();
  @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({ width: 25, height: 25 })
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
    .width('30%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex;
      this.tabsController.changeIndex(this.currentIndex);
    })
  }
  build() {
    Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#00CB87')
      }
      .tabBar(this.TabBuilder('页签1', 0, $r('app.media.startIcon'), $r('app.media.startIcon')))
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#007DFF')
      }
      .tabBar(this.TabBuilder('页签2', 1, $r('app.media.icon'), $r('app.media.icon')))
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#F04B3D')
      }
      .tabBar(this.TabBuilder('页签3', 2, $r('app.media.icon'), $r('app.media.icon')))
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#F04B3D')
      }
      .tabBar(this.TabBuilder('页签4', 3, $r('app.media.icon'), $r('app.media.icon')))
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#FF6C3F')
      }
      .tabBar(this.TabBuilder('页签5', 4, $r('app.media.icon'), $r('app.media.icon')))
    }
    .barWidth('100%')
    .barHeight(50)
    .barMode(BarMode.Scrollable)
    .scrollable(true)
    .backgroundColor('#f2f3f5')
    .onChange((index: number) => {
      this.currentIndex = index;
    })
  }
}

更多关于HarmonyOS 鸿蒙Next tab实现自动滚动效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS中实现Next tab自动滚动效果，可以利用鸿蒙系统提供的动画和计时器API来完成。以下是一个基本的实现思路：

  1. 定义Tab布局：首先，在XML布局文件中定义Tab组件，确保每个Tab项可以正确显示。

  2. 设置滚动逻辑：在JavaScript或eTS（ArkTS）中，通过获取Tab组件的引用，设置滚动动画。可以使用setInterval或requestAnimationFrame来定时更新Tab的滚动位置。

  3. 动画实现：利用鸿蒙的动画模块，创建一个平滑滚动的动画效果。可以定义滚动开始和结束的位置，以及滚动持续的时间。

  4. 计时器控制：使用计时器控制滚动的速度和方向。例如，当滚动到最后一个Tab时，可以重置计时器，使滚动回到第一个Tab，形成循环滚动效果。

  5. 事件处理：处理用户交互事件，如手动切换Tab时，可能需要暂停或重置自动滚动计时器。

示例代码（伪代码，具体实现需根据鸿蒙开发文档调整）：

let tabRef = this.$refs.tabComponent;
let currentIndex = 0;
setInterval(() => {
    currentIndex = (currentIndex + 1) % tabCount;
    animateScrollTo(tabRef, currentIndex);
}, scrollInterval);

function animateScrollTo(tabRef, index) {
    // 实现平滑滚动到指定Tab位置的逻辑
}

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部