HarmonyOS Next开发中如何创建一个简单的Tabs导航栏？ 需要哪些基础代码或配置？

Question

HarmonyOS Next开发中如何创建一个简单的Tabs导航栏？ 需要哪些基础代码或配置？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

在 HarmonyOS Next 中创建 Tabs 导航栏

@Entry
@Component
struct testDemo {
    build() {
        Column() {
            Column() {
                Tabs({ barPosition: BarPosition.End }) {
                    TabContent(){
                        Column(){
                            Tabs(){
                                // 顶部导航栏内容
                                TabContent(){
                                    Text('关注的内容')
                                }
                               .tabBar('关注')
                                TabContent(){
                                    Text('视频的内容')
                                }
                               .tabBar('视频')
                                TabContent(){
                                    Text('游戏的内容')
                                }
                               .tabBar('游戏')
                                TabContent(){
                                    Text('数码的内容')
                                }
                               .tabBar('数码')
                                TabContent(){
                                    Text('科技的内容')
                                }
                               .tabBar('科技')
                            }
                        }
                       .width('100%')
                    }
                   .tabBar('首页')
                    // 其他 TabContent 内容：发现、推荐、我的
                }
            }
        }
    }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。