HarmonyOS 请问TabContent如何与page绑定?

我想要实现的效果:

Tabs里有4个TabContent,每点击1个TabContent显示对应的page页面。

如果按照TabContent官方文档的写法,所有page的代码都会写到同一个page里,这样这个page里的代码会非常多,

如何才能每点击1个TabContent显示对应的page页面,这样每个page页面代码都写到自己对应的page里,后期维护会很清晰。

请问我该如何实现我想要的这种效果?

HarmonyOS 请问TabContent如何与page绑定?-鸿蒙开发者社区

HarmonyOS
2024-08-04 14:43:08
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
失望的满天星

代码如下:

Tabs页面代码

import { Home } from "@ohos/home" 
import { NewProduct } from "@ohos/newproduct" 
import { ShopCart } from "@ohos/shopcart" 
import { Personal } from "@ohos/personal" 
 
@Entry 
@Component 
 
struct  MainPage{ 
  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm' 
  @State spaOpacity:number = 0 
  @State spaScale:number = 1 
  private controller: TabsController = new TabsController() 
  @State selectIndex: number = 0 
  private data: MyDataSource = new MyDataSource(); 
  pageTransition() { 
    PageTransitionEnter({ duration: 500, curve: Curve.Linear }).opacity(this.spaOpacity) 
      .onEnter((type: RouteType, progress: number) => { 
          this.spaOpacity = progress 
      }) 
    PageTransitionExit({ duration: 500, curve: Curve.Ease }) 
      .onExit((type: RouteType, progress: number) => { 
 
      }) 
  } 
 
  aboutToAppear(): void { 
    for (let i = 0; i <= 20; i++) { 
      this.data.pushData(`Hello ${i}`) 
    } 
  } 
 
  build() { 
    Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 
      TabContent() { 
        Home() 
      } 
      .tabBar(BottomTabBarStyle.of($r(this.selectIndex == 0 ? 'app.media.ic_home_focus' : 'app.media.ic_home_normal'), '首页')) 
 
      TabContent() { 
        ShopCart() 
      } 
      .tabBar(BottomTabBarStyle.of($r(this.selectIndex == 1 ? 'app.media.ic_cart_focus' : 'app.media.ic_cart_normal'), '购物车')) 
 
      TabContent() { 
        NewProduct( 
        ) 
      } 
      .tabBar(BottomTabBarStyle.of($r(this.selectIndex == 2 ? 'app.media.ic_product_focus' : 'app.media.ic_product_normal'), '产品')) 
 
      TabContent() { 
        Personal({ 
          page:10 
        }) 
      } 
      .tabBar(BottomTabBarStyle.of($r(this.selectIndex == 3 ? 'app.media.ic_personal_focus' : 'app.media.ic_personal_normal'), '个人')) 
    }.onTabBarClick((index: number) => { 
      this.selectIndex = index 
    }) 
  } 
}

package.json配置

 "dependencies": { 
    "@ohos/common": "file:../common", 
    "@ohos/commoditydetail": "file:../features/commoditydetail", 
    "@ohos/home": "file:../features/home", 
    "@ohos/newproduct": "file:../features/newproduct", 
    "@ohos/personal": "file:../features/personal", 
    "@ohos/shopcart": "file:../features/shopcart", 
  }

参考链接:

https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_NEXT-MultiShopping

分享
微博
QQ
微信
回复
2024-08-05 12:15:43
相关问题
HarmonyOS CustomDialogpage的关系
15浏览 • 1回复 待解决
鸿蒙如何获取设备绑定的设备ID?
994浏览 • 1回复 待解决
HarmonyOS 侧滑返回事件拦截绑定
1258浏览 • 1回复 待解决
请问HAP如何HAR进行通信交流?
441浏览 • 1回复 待解决
多个设备智慧生活app绑定问题
14954浏览 • 2回复 待解决
HarmonyOS TabContent
478浏览 • 1回复 待解决
字母表侧标滚动栏的双向绑定
797浏览 • 1回复 待解决
HarmonyOS如何实现双向数据绑定
490浏览 • 1回复 待解决
请问PreviewerSimulator的区别是什么?
254浏览 • 1回复 待解决
HarmonyOS tabContent底部被遮挡
37浏览 • 1回复 待解决