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);
}
HarmonyOS
16h前
浏览
收藏 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
      }
    })
  }
}
分享
微博
QQ
微信
回复
13h前
相关问题
HarmonyOS toggle 点击拦截
85浏览 • 1回复 待解决
Slider拦截点击事件失败
310浏览 • 1回复 待解决
HarmonyOS Popup会拦截页面点击事件
24浏览 • 1回复 待解决
HarmonyOS 怎么拦截返回键盘
368浏览 • 1回复 待解决
HarmonyOS Toggle组件怎么拦截
422浏览 • 1回复 待解决
HarmonyOS web组件怎么拦截请求
617浏览 • 1回复 待解决
HarmonyOS Tabs怎么隐藏bar
435浏览 • 1回复 待解决
HarmonyOS 点击tabs如何跳转到二级页面
427浏览 • 1回复 待解决
HarmonyOS Tabs怎么实现预加载
29浏览 • 1回复 待解决
HarmonyOS 全模态怎么拦截系统返回键
53浏览 • 1回复 待解决
HarmonyOS Tabs怎么与text同行显示?
322浏览 • 1回复 待解决
HarmonyOS tabs的tabBar怎么居左
572浏览 • 1回复 待解决
HarmonyOS Tabs 的bar 怎么设置对齐左边
1050浏览 • 1回复 待解决
HarmonyOS 按钮怎么防止重复点击
27浏览 • 1回复 待解决