实现自定义tabbar滚动鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例实现自定义tabbar滚动功能。

实现自定义tabbar滚动源码链接

效果预览

使用说明

通过触发动画实现滑动切换，通过回调实现内容切换和tabbar切换的联动。

实现思路

自定义tabbar

  Text(tabName)
    .fontSize(18)
    .fontColor(tabIndex === this.focusIndex ? Color.Blue : Color.Black)
    .id(tabIndex.toString())
    .onAreaChange((oldValue: Area, newValue: Area) => {
      if (this.focusIndex === tabIndex && (this.indicatorLeftMargin === 0 || this.indicatorWidth === 0)) {
        if (newValue.position.x !== undefined) {
          let positionX = Number.parseFloat(newValue.position.x.toString())
          this.indicatorLeftMargin = Number.isNaN(positionX) ? 0 : positionX
        }
        let width = Number.parseFloat(newValue.width.toString())
        this.tabWidth = Number.isNaN(width) ? 0 : width
        this.indicatorWidth = this.tabWidth
      }
    })