HarmonyOS鸿蒙Next中Tabs组件tabBar样式不满足需求的解决方案

HarmonyOS鸿蒙Next中Tabs组件tabBar样式不满足需求的解决方案 Tabs官方提供的tabBar样式案例中，各tabBar是相互独立的，想要有拼接一起的效果，目前小编还没想到什么好的解决方案，希望大家多多交流。

如图，这种效果进行左右切换下面内容也进行切换，首先想到用tabs组件，但tabBar进行自定的时候，各tabBar之间相互独立进行调试很难得到预期效果，下面是小编解决案例希望能抛砖引玉。

Tabs({
  index: $$this.selected,
  barPosition: BarPosition.Start,
  controller: this.controller
}) {
  tabContent(){}
}
.barHeight(0)

1、通过把barHeight高度设为0，排除tabBar的干扰。

2、创建TabsController实例对象，Tabs组件的控制器，用于控制Tabs组件进行页签切换。不支持一个TabsController控制多个Tabs组件。

let controller: TabsController = new TabsController()

3、通过index进行双向绑定，后续通过selsected获取到tads切换的页签。

这样基本上就可以了，tabBar样式我们就可以自己来通过其他组件来设置了，list也好，Row也好，能够用拿到tabs切换的页签，问题就很容易解决了。

注意：

如果你也是像上图这种样式的tabBar，要注意在快速切换的过程中会有些问题。

可以通过Tabs的这些属性加以限制。

@State currentIndex: number = 1;//刚一进来选中的第二项中组件

Tabs(){
}

.onAnimationEnd((index: number) {
  this.currentIndex = index;
})
.onAnimationStart((index: number, targetIndex: number) {
  if (index == targetIndex) {
    this.currentIndex = targetIndex;
  }
})
.onGestureSwipe((index: number, event: TabsAnimationEvent) {
  if (Math.abs(event.currentOffset) < 10) {
    return;
  }
  if (event.currentOffset < 0 && index < 2 && this.currentIndex == index) {
    this.currentIndex = index + 1;
  }
  if (event.currentOffset > 0 && index > 0 && this.currentIndex == index) {
    this.currentIndex = index - 1;
  }
})

如果再加一些性能优化可以通过onchange属性，选中的时候在加载，不选中就隐藏，onShown，onHidden。

/**
 * 生命周期监听
 */
export class LifecycleController {
  /**
   * 页面切换
   */
  onShown = () => {
  };
  /**
   * 页面隐藏
   */
  onHidden = () => {
  };
}

  private minListController: LifecycleController = new LifecycleController();
  
  private midListController: LifecycleController = new LifecycleController();
 
  private maxListController: LifecycleController = new LifecycleController();

tabs(){
}
.onChange((index: number) {
        const oldIndex = this.currentIndex;
        if (oldIndex == index) {
          return;
        }
        this.currentIndex = index;
        if (oldIndex != index) {
          if (oldIndex == 0) {
            this.maxListController.onHidden();
          } else if (oldIndex == 1) {
            this.midListController.onHidden();
          } else if (oldIndex == 2) {
            this.minListController.onHidden();
          }
        }
        if (index == 0) {
          this.maxListController.onShown();
        } else if (index == 1) {
          this.midListController.onShown();
        } else if (index == 2) {
          this.minListController.onShown();
        }
      })

涉及到的Navigation生命周期的封装

controller: LifecycleController = new LifecycleController();

private onShown = () => {
    this.getData();
  }
  /**
   * 隐藏回调监听
   */
  private onHidden = () => {
  }

  aboutToAppear(): void {
    this.controller.onShown = this.onShown;
    this.controller.onHidden = this.onHidden;
    this.onShown();
  }

  aboutToDisappear(): void {
    this.controller.onShown = () => {
    };
    this.controller.onHidden = () => {
    };
  }