中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
使用的Tab+ TabContent,有四个TabContent,四个TabContent中分别写了ABCD四个自定义组件。 如何在ATabContent组件中点击一个按钮,切换到BTabContent组件中?
微信扫码分享
@Entry @Component struct MainPage { //监听IndexPage,更改的时候 执行 this.tabsController.changeIndex(this.currentIndex); @StorageLink('IndexPage') @Watch('changeIndex') currentIndex: number = 0; changeIndex() { this.tabsController.changeIndex(this.currentIndex); } private tabsController: TabsController = new TabsController(); @Builder TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) { Column() { Image(this.currentIndex === index ? selectedImg : normalImg) .width(25) .height(25) Text(title) .margin({ top: 4 }) .fontSize(10) .fontColor(this.currentIndex === index ? Color.Red : Color.Gray) }.height(56) .onClick(() => { this.currentIndex = index; this.tabsController.changeIndex(this.currentIndex); }) } build() { Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) { TabContent() { Home() }.tabBar(this.TabBuilder('首页', 0, $r('app.media.ic_home_focus'), $r('app.media.ic_home_normal'))) TabContent() { ShoppingCart() }.tabBar(this.TabBuilder('购物车', 1, $r('app.media.ic_cart_focus'), $r('app.media.ic_cart_normal'))) TabContent() { Test() }.tabBar(this.TabBuilder('测试', 2, $r('app.media.ic_cart_focus'), $r('app.media.ic_cart_normal'))) }.barHeight(56) .scrollable(false) .onChange((index: number) => { this.currentIndex = index; }) } }