文章目录前言最基础的 Tabs自定义标签栏样式代码实现监听切换 联动核心代码顶部标签 可滑动常见误区小白必踩完整可运行示例Tabs 多视图完整示例写在最后前言“微信底部那排微信/通讯录/发现/我”就是最经典的标签页。一个容器里放好几个页面点哪个显示哪个互不干扰。HarmonyOS 用Tabs组件一行代码就能做出来还自带滑动切换。这篇文章讲清Tabs的正规用法从底部导航到顶部标签都覆盖。最基础的 TabsEntryComponentV2struct MainTabs{Localindex:number0build(){Tabs({barPosition:BarPosition.End}){// End 底部TabContent(){Column(){Text(首页内容).fontSize(20)}}.tabBar(首页)TabContent(){Column(){Text(我的内容).fontSize(20)}}.tabBar(我的)}.width(100%).height(100%)}}讲解Tabs里面放多个TabContent每个对应一个标签。.tabBar(首页)设置标签栏显示的标题。barPosition: BarPosition.End把标签栏放到底部手机 app 的标配。默认是顶部。自定义标签栏样式默认 tabBar 只是文字想加图标或自定义样式传组件进去代码实现TabContent(){Column(){Text(消息列表)}}.tabBar(Column(){Image($r(app.media.msg)).width(24).height(24)Text(消息).fontSize(12)})tabBar可以接收任意组件于是图标文字、红点角标都能做。监听切换 联动知道当前在哪个标签用onChange核心代码Tabs({index:this.index}){// ...}.onChange((idx:number){this.indexidxconsole.info(切到了第idx个标签)})index控制初始显示哪个标签。onChange在切换时触发可用来懒加载对应页数据比如切到我的才请求用户信息。顶部标签 可滑动Tabs({barPosition:BarPosition.Start}){// 顶部TabContent(){/* 关注 */}.tabBar(关注)TabContent(){/* 推荐 */}.tabBar(推荐)TabContent(){/* 热点 */}.tabBar(热点)}.scrollable(true)// 允许左右滑动切换BarPosition.Start放顶部scrollable(true)让用户滑动切换是信息流 app 的常见形态。常见误区小白必踩误区说明barPosition搞反手机底部导航用BarPosition.End顶部 tab 用Start写反了位置不对。onChange不联动切到某个 tab 才加载对应数据懒加载不监听onChange就做不到。顶部 tab 不scrollable想要左右滑动切换记得开.scrollable(true)。下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲改一改文末「动手改一改」里的参数亲眼看看效果。完整可运行示例Tabs 多视图用TabsTabContent做底部导航切换。完整示例// Tabs 标签页切换EntryComponentstruct MainTabs{Stateidx:number0build(){Tabs({barPosition:BarPosition.End}){// 底部 tab 栏TabContent(){Text(首页内容).fontSize(20)}.tabBar(首页)TabContent(){Text(发现内容).fontSize(20)}.tabBar(发现)TabContent(){Text(我的内容).fontSize(20)}.tabBar(我的)}.onChange((i){this.idxi})// 记录当前页.width(100%).height(100%)}}你会看到什么底部三个 tab首页/发现/我的点哪个就切到对应内容区。动手改一改把BarPosition.End改成BarPosition.Starttab 栏跑到顶部。给tabBar传自定义组件图标文字。用State控制Tabs的index实现「消息页有红点自动跳过去」。写在最后Tabs是多视图切换的标准解三件事放 TabContent、配 tabBar、用 onChange 监听。底部导航用BarPosition.End顶部 tab 用Startscrollable。建议你用 Tabs 把你的 app 首页重构成首页/分类/购物车/我的四宫格底部导航——这是用户对 app 最基础的预期做出来立刻像个正经产品。
