前言在 Tabs 导航体系中TabContent是承载每个标签页内容的容器——它与Tabs组件配合完成标签页的切换、内容懒加载以及生命周期管理。理解 TabContent 的声明周期行为对提升多 Tab 场景下的性能至关重要。本文以「猫猫大作战」中“主页“、“排行榜”、“我的“三个 Tab 页面为锚点讲解 TabContent 的内容组织、懒加载机制以及生命周期管理。提示本系列不讲 ArkTS 基础语法与环墋搭建假设你已跟完第 1–89 篇。本篇是阶段三第 90 篇。一、TabContent 结构1.1 基本使用Tabs() { TabContent() { // 主页内容 MainMenuPage() } .tabBar(主页) TabContent() { // 排行榜内容 LeaderboardPage() } .tabBar(排行榜) }1.2 TabContent 属性属性说明.tabBar()绑定标签栏内容.tabBar()支持 string/ResourceStr/Builder自定义标签样式二、生命周期2.1 TabContent 状态Component struct LeaderboardTab { aboutToAppear() { console.info(排行榜 Tab 可见) } onPageHide() { console.info(排行榜 Tab 不可见) } }2.2 切换时的生命周期TabContent主页→ TabContent排行榜 主页.onPageHide() 排行榜.aboutToAppear() 排行榜.build() 排行榜.onPageShow()三、懒加载优化Tabs() { TabContent() { MainMenuPage() } .tabBar(主页) TabContent() { LeaderboardPage() } .tabBar(排行榜) } // LazyForEach cachedCount 在 TabContent 内部生效四、总结TabContent 是多 Tab 页面的核心容器配合 Tabs 实现标签页切换和内容懒加载。核心要点TabContent 承载每个 Tab 的内容.tabBar()绑定标签栏切换时触发 onPageShow/onPageHide下一篇预告第 91 篇将深入 Swiper 轮播——新手引导页面的实现。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源TabContent 组件参考Tabs 组件参考开源鸿蒙跨平台社区第 89 篇Tabs 导航第 91 篇Swiper 轮播