HarmonyOS 实战开发 —— 自定义tabs导航栏实现切换效果

---

📚往期笔录记录🔖：

🔖鸿蒙（HarmonyOS）北向开发知识点记录~
🔖鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
🔖记录一场鸿蒙开发岗位面试经历~
🔖持续更新中……

---

一.Tabs组件的子组件TabContent有属性.tabBar()，由官方文档可知，其参数value: 可以是字符串、资源引用、自定义构建器或包含 icon 和 text 的对象，用于设置 TabBar 上显示的内容。

但是该导航栏为默认样式，要想实现更多样式，必须自定义TabBar。

自定义TabBar步骤：

1.使用@Builder修饰一个函数tabBarBuilder()，里面是自定义的TabBar的结构。

2…tabBar()中传参为自定义构建器this.tabBarBuilder()。

注：构建器函数里面是可以传参的，所以多个TabContent可以共用一个tabBarBuilder()然后传不同的参数。

二.在自定义TabBar的过程中，我们发现会遇到切换TabContent时，导航栏发生样式变化的场景。

.onChange()事件和.onTabBarClick()事件都可以获得当前页面的索引。所以设置一个存储当前页面的索引值的变量，在触发事件的时候，将获得的索引值存储到这个变量中即可。

//设置当前页面的索引值，默认为0
@State currentIndex: number = 0
//设置onChange事件
Tabs(){}
.onChange((index: number) => {
        this.currentIndex = index
      })

三.在第一点我们提到构建器函数里面是可以传参的，如果我们在传参中加上每个TabContent对应的下标值，那么在自定义的tabBar中，就可以通过判断语句来设置不同TabContent的不同样式。还可以通过传参的下标值与第二点中变量存储的索引值比较，从而设置当前页面的高亮显示（通过三元符）。

四.轮播图

@Builder
  //轮播图Builder
  pic(url: ResourceStr, str: string) {
    Column() {
      Image(url)
        .width('100%')
      Row() {
        Text(str)
          .fontColor(Color.White)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .maxLines(1)
          .textOverflow({
            overflow: TextOverflow.Ellipsis
          })
      }
      .width('100%')
      .padding({
        left: 10,
        right: 10
      })
      .position({
        bottom: 30
      })
    }
    .width('100%')
  }
//轮播图List
  @State bannerList: BannerItem[] = [