HarmonyOS 请问怎么拦截Tabs点击

底部导航栏,点击后跳转到登录页面,未登录状态返回,Tabs应该还选中上一个,而不是选中当前怎么写拦截,登录成功后再刷新当前选中当前Tabs。

/**
 * 业务bufen
 */
@Builder
view() {
  Stack() {
    if (this.currentBreakpoint === BreakpointTypeEnum.LG) {
      Image($r('app.media.app_icon'))
        .width(CommonConstants.FULL_PERCENT)
        .height(CommonConstants.FULL_PERCENT)
    }
    Flex({direction: this.currentBreakpoint === BreakpointTypeEnum.LG ? FlexDirection.RowReverse : FlexDirection.Column,}) {
      Tabs({ index: this.currentIndex, barPosition: this.currentBreakpoint === BreakpointTypeEnum.LG ?BarPosition.Start : BarPosition.End }) {
        ForEach(TabsInfo2, (item: TabBarOption, index: number) => {
          TabContent() {
            this.TabContent_views(index)
          }
          .tabBar(this.BottomTabBuilder(item))
        }, (item: TabBarOption) => JSON.stringify(item))
      }
      .barWidth(this.currentBreakpoint === BreakpointTypeEnum.LG ? '96vp': CommonConstants.FULL_PERCENT)
      .barHeight(this.currentBreakpoint === BreakpointTypeEnum.LG ? CommonConstants.FULL_PERCENT : ((deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 35 : 35 + 44)))
      .barBackgroundColor('#FFFFFF')
      .barMode(this.currentBreakpoint === BreakpointTypeEnum.LG ? BarMode.Scrollable : BarMode.Fixed,{ nonScrollableLayoutStyle: LayoutStyle.ALWAYS_CENTER })
      .vertical(this.currentBreakpoint === BreakpointTypeEnum.LG)
      .scrollable(false)
      .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
        this.currentIndex = targetIndex;
        this.lottieController();
      })
      .onChange((index) => {
        let aaaa = index
      })
      .onTabBarClick((index) => {
        let aaaa = index
      })
    }
    .width(CommonConstants.FULL_PERCENT)
    .height(CommonConstants.FULL_PERCENT)
    .backgroundColor((this.currentBreakpoint === BreakpointTypeEnum.LG && this.currentIndex === TabBarType.index5) ? '#00FFFFFF' : '#F1F3F5')

  }
}
@Builder
TabContent_views(index:number) {
  if (index===TabBarType.index1) {
    PageNav({
      changeFontSize: this.changeFontSize,
      fontSizeText: this.fontSizeText,
    })
  }
  if (index===TabBarType.index2) {

  }
  if (index===TabBarType.index3) {

  }
  if (index===TabBarType.index4) {
    if (this.isLogged) {
      PageIndex5WebView1({
        url: 'https://developer.huawei.com/consumer/cn/hdc/hdc2023/ticket/101677813051874334/?ha_source=HDCminisite&ha_sourceId=89000360',
        webViewController: $webViewController,
        changeFontSize: this.changeFontSize,
        fontSizeText: this.fontSizeText,
      })
    }
  }
  if (index===TabBarType.index5) {
  }
}
@Builder
BottomTabBuilder(tabBarOption: TabBarOption) {
  Column() {
     Canvas(tabBarOption.canvasRenderingContext)
      .width('35vp')
      .height('35vp')
      .onReady(() => {
        lottie.loadAnimation({
          container: tabBarOption.canvasRenderingContext,
          renderer: 'canvas',
          loop: false,
          autoplay: false,
          name: tabBarOption.name,
          path: tabBarOption.path,
        });
        this.lottieController();
      })
    Text(tabBarOption.title)
      .fontSize('15fp')
      .margin({ top: '4vp' })
      .fontWeight(600)
      .fontColor(tabBarOption.id === this.currentIndex ? '#0A59F7' : '#99000000')
  }
  .padding({bottom: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : 24})
  .height(this.currentBreakpoint === BreakpointTypeEnum.LG ? 80 : CommonConstants.FULL_PERCENT)
  .width(CommonConstants.FULL_PERCENT)
  .justifyContent(FlexAlign.Center)
}
lottieController(): void {
  // 自定义设置组件3-需要登录才能查看bufen
  if (((this.currentIndex === TabBarType.index4) && (!this.isLogged))) {
  this.routerController.push({
    url: RouterMap.LoginIndex,
    param: new Object({ query1: "1", query2: '2' }),
    lifecycle: {
      onShown: () => {
        console.info("other page in home");
      },
      onReady: () => {
      },
      onHidden: () => {
        if (this.isLogged) {
          WindowUtil.updateStatusBarColor(getContext(this), false);
          lottie.stop();
          lottie.play(TabsInfo2[this.currentIndex].name);
        }
      },
    }
  })
  return
}
// 自定义 我的组件bufen
if (this.currentIndex === TabBarType.index5) {
  WindowUtil.updateStatusBarColor(getContext(this), true);
  lottie.stop();
  lottie.play(TabsInfo2[this.currentIndex].name);
  return
}
// 未登录bufen
WindowUtil.updateStatusBarColor(getContext(this), false);
lottie.stop();
lottie.play(TabsInfo2[this.currentIndex].name);
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
HarmonyOS
2024-12-26 15:08:21
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
Excelsior_abit

暂时没有tabBar点击拦截功能实现,可以使用TabsController自定义页签以及并在其中添加事件进行逻辑判断,参考demo如下:

export class ButtonInfoModel {
  index: number = 0;
  info: string = 'home';
  title: string = 'Home';
}
const buttonInfo: ButtonInfoModel[] =
  [{ index: 0, info: 'home', title: 'Home' }, { index: 1, info: 'map', title: 'Map' },
    { index: 2, info: 'charging', title: 'Charging' }]
@Component
export struct Home {
  @State message: string = 'Home';
  build() {
    Row() {
      Column() {
        Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)
        Text('点击之后无法进入charging页,会跳转home页').fontSize(20).fontWeight(FontWeight.Bold).onClick(() => {
          buttonInfo[2].info = "home"
        })
      }.width('100%')
    }.height('100%')
  }
}
@Component
export struct Map {
  @State message: string = 'Map';
  build() {
    Row() {
      Column() {
        Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)
      }.width('100%')
    }.height('100%')
  }
}
@Component
export struct Charging {
  @State message: string = 'Charging';
  build() {
    Row() {
      Column() {
        Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)
      }.width('100%')
    }.height('100%')
  }
}
@Entry
@Component
struct MainPage {
  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm';
  @State currentPageIndex: number = 0;
  @State tabArray: Array<number> = [0, 1, 2]
  private controller: TabsController = new TabsController()
  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Home()
        }
        TabContent() {
          Map()
        }
        TabContent() {
          Charging()
        }
      }.barHeight('0vp').height('94%').vertical(this.currentBreakpoint === 'lg').scrollable(false)

      this.bottomNavigation()
    }.justifyContent(FlexAlign.SpaceBetween).backgroundColor("#f1f3f5")
  }
  @Builder
  bottomNavigation() {
    Row() {
      ForEach(this.tabArray, (item: number) => {
        this.BottomNavigation(buttonInfo[item])
      })
    }.height("50vp").backgroundColor(Color.White).justifyContent(FlexAlign.SpaceAround).width("100%")
  }
  @Builder
  BottomNavigation(button: ButtonInfoModel) {
    Column({ space: '10vp' }) {
      Text(button.title)
        .fontColor(this.currentPageIndex === button.index ? "#0587D7" : "#A5A9AD")
        .fontWeight(500)
        .textAlign(TextAlign.Center)
        .fontSize('10fp')
    }.alignItems(HorizontalAlign.Center).margin(-20).onClick(() => {
      if (button.index === 2 && button.info === 'home') {
        this.controller.changeIndex(0)
        this.currentPageIndex = 0
      } else {
        this.controller.changeIndex(button.index)
        this.currentPageIndex = button.index
      }
    })
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
分享
微博
QQ
微信
回复
2024-12-26 17:14:09
相关问题
HarmonyOS toggle 点击拦截
894浏览 • 1回复 待解决
Slider拦截点击事件失败
815浏览 • 1回复 待解决
HarmonyOS Popup会拦截页面点击事件
581浏览 • 1回复 待解决
HarmonyOS 怎么拦截返回键盘
1070浏览 • 1回复 待解决
HarmonyOS Toggle组件怎么拦截
1355浏览 • 1回复 待解决
HarmonyOS web组件怎么拦截请求
1138浏览 • 1回复 待解决
HarmonyOS Tabs怎么隐藏bar
977浏览 • 1回复 待解决
HarmonyOS 点击tabs如何跳转到二级页面
1201浏览 • 1回复 待解决
HarmonyOS Tabs怎么实现预加载
1191浏览 • 1回复 待解决
HarmonyOS 全模态怎么拦截系统返回键
599浏览 • 1回复 待解决
HarmonyOS tabs的tabBar怎么居左
1159浏览 • 1回复 待解决
HarmonyOS Tabs组件怎么动态添加TabContent
1025浏览 • 1回复 待解决
HarmonyOS Tabs怎么与text同行显示?
1141浏览 • 1回复 待解决
HarmonyOS Tabs 的bar 怎么设置对齐左边
1888浏览 • 1回复 待解决
HarmonyOS http.createHttp怎么拦截
596浏览 • 1回复 待解决
HarmonyOS 按钮怎么防止重复点击
955浏览 • 1回复 待解决