1.涉及到的技术点

1. 选项卡 (Tabs)的使用

官方文档指南：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-tabs-V5?catalogVersion=V5

2. Tabs基本知识

1. Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏
2. TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
3. TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。

3.demo实现过程

@Entry
@Component
struct Index {
  build() {
    Column() {
      Tabs() {
        TabContent() {
          Text('最新的内容').fontSize(30)
        }
        .tabBar('最新')

        TabContent() {
          Text('华语的内容').fontSize(30)
        }
        .tabBar('华语')

        TabContent() {
          Text('欧美的内容').fontSize(30)
        }
        .tabBar('欧美')

        TabContent() {
          Text('韩国的内容').fontSize(30)
        }
        .tabBar("韩国")

        TabContent() {
          Text('日本的内容').fontSize(30)
        }
        .tabBar("日本")

        TabContent() {
          Text('中国香港的内容').fontSize(30)
        }
        .tabBar("中国香港")


        TabContent() {
          Text('中国台湾的内容').fontSize(30)
        }
        .tabBar("中国台湾")


        TabContent() {
          Text('印度的内容').fontSize(30)
        }
        .tabBar("印度")

        TabContent() {
          Text('泰国的内容').fontSize(30)
        }
        .tabBar("泰国")

        TabContent() {
          Text('其他的内容').fontSize(30)
        }
        .tabBar("其他")
      }
      // 滚动导航栏可以用于顶部导航栏或者侧边导航栏的设置，内容分类较多，
      // 屏幕宽度无法容纳所有分类页签的情况下，需要使用可滚动的导航栏
      // 滚动导航栏需要设置Tabs组件的barMode属性，默认值为BarMode.Fixed表示为固定导航栏，
      // BarMode.Scrollable表示可滚动导航栏

      .barMode(BarMode.Scrollable)

    }
    .width('100%')
    .height('100%')

  }
}

1. 滚动导航栏可以用于顶部导航栏或者侧边导航栏的设置，内容分类较多， 屏幕宽度无法容纳所有分类页签的情况下，需要使用可滚动的导航栏
2. 滚动导航栏需要设置Tabs组件的barMode属性，默认值为BarMode.Fixed表示为固定导航栏，BarMode.Scrollable表示可滚动导航栏
3. 默认点击TabBar页签时切换TabContent是用动画效果的，如果不想要动画，可以设置animationMode(AnimationMode.NO_ANIMATION) 官方文档指南：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabs-V5#animationmode12

3. 运行效果