#我的鸿蒙开发手记# 自学—自定义底部导航页签功能实现 原创

@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  // 5.0 新增动画参数
  @Builder TabBuilder(title: string, targetIndex: number, selectedLottie: string, normalLottie: string) {
    Column() {
      LottieAnimation({
        src: this.currentIndex === targetIndex ? selectedLottie : normalLottie,
        iterations: Infinity
      }).size({ width: 28, height: 28 })

      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#28bff1' : '#8a8a8a')
        .fontWeight(FontWeight.Medium)
    }
    .onClick(() => {
      this.controller.changeIndexWithAnim(targetIndex, 300) // 5.0 新增平滑过渡动画
    })
  }

  build() {
    Tabs({
      barPosition: BarPosition.End,
      controller: this.controller,
      barEffect: BarEffect.Blur // 5.0 新增毛玻璃效果
    }) {
      TabContent() {
        HomePage()
      }.tabBar(this.TabBuilder('首页', 0, 'selected_home.json', 'normal_home.json'))

      // 其他 TabContent...
    }
    .scrollable(false)
    .onChange((index) => {
      this.currentIndex = index
      // 5.0 新增页面预加载
      this.controller.preloadAdjacent(1) 
    })
  }
}

import { homepage } from './homepage'
import router from '@ohos.router';
import { CommuityPage } from './dynamic'
import { Personal } from './Personal'
@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
  @State filterText: string = ''; // 添加一个状态用于保存搜索框的值
  // 自定义导航页签的样式
  @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 ? '#28bff1' : '#8a8a8a')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex
      this.controller.changeIndex(this.currentIndex)
    })
  }

  build() {
    Column() {
      Tabs({
        barPosition: BarPosition.End,
        controller: this.controller
      }) {
        TabContent() {
          homepage()
        }.tabBar(this.TabBuilder('首页', 0, $r('app.media.indexinco'), $r('app.media.indexinco')))

        TabContent() {
          Column() {
            CommuityPage()
          }.size({ width: '100%', height: '100%' })
        }.tabBar(this.TabBuilder('内蒙古动态', 1, $r('app.media.dongtai2'), $r('app.media.dongtai2')))

        TabContent() {
          Column() {
            Personal()
          }.size({ width: '100%', height: '100%' })
        }.tabBar(this.TabBuilder('我的', 2, $r('app.media.user1'), $r('app.media.user1')))
      }.scrollable(false) // 禁止滑动切换
    }
    .width('100%')
    .height('100%')
  }
}

// 5.0 新增动态模糊效果
Tabs().barEffect(BarEffect.Blur)
      .backdropBlur(10) // 模糊强度
      .backdropOpacity(0.8) // 透明度

.accessibilityGroup(true)
.accessibilityText($r('app.string.tab_home_desc'))

@Styles function padTabStyle() {
  .width(120)
  .height(80)
}

@Component
struct AdaptiveTab {
  build() {
    Column() {
      // 内容...
    }
    .useSizeType({
      pad: padTabStyle,
      phone: ()=>{},
      tv: ()=>{}
    })
  }
}

hdc shell snapshot_demo -d  # 生成多端布局快照