HarmonyOS鸿蒙Next开发中自定义标签栏组件page_tabs

前言

最近开发鸿蒙APP，发现系统的标签栏功能太少，于是自定义了一个，具体内容可查看【鸿蒙开发】自定义顶部Tabs标签栏，支持字体大小和颜色渐变，且该库已发布到OpenHarmony三方库中心仓page_tabs，下面说说该库的具体内容。

介绍

PageTabs是一个自定义Tabs标签栏分页组件

PageScroll是一个支持Header，标签悬停的分页组件

特性

• 标签支持文字、图片、图文混合等多种样式
• 标签支持文字大小、图片大小缩放，文字颜色渐变
• 标签背景支持颜色、图片、自定义Builder
• 标签支持设置左右间距
• 指示器支持设置颜色、图片、自定义Builder等
• 支持页面滑动与指示器联动

安装教程

方法一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

建议：在使用的模块路径下进行执行命令。

ohpm install [@quint](/user/quint)/page_tabs

方法二：在工程的oh-package.json5中设置三方包依赖，配置示例如下：

"dependencies": { "[@quint](/user/quint)/page_tabs": "^1.0.0" }

使用示例

1、创建TabItem数组

items: TabItem[] = [
    {
      title: '推荐'
    },
    {
      title: '关注'
    },
    {
      title: '直播'
    },
    {
      title: '短视频'
    }
  ]

2、添加PageTabs

build() {
    Column() {
      PageTabs({
        items: this.items,
        pageBuild: (index) => {
          this.page(index)
        },
        config: {
          backgroundColor: '#ff84b4e0',
          tabHeight: 30
        }
      })
    }
  }

配置说明

1、标签item配置

2、标签配置

3、指示器配置

4、其他配置

效果图

1、标签样式

说明	效果图
文本
图片
图文混排
宽度均分
标签覆盖列表

2、指示器样式

说明	效果图
宽度固定
宽度跟随
颜色
图片

3、背景

说明	效果图
背景颜色
背景图片
背景颜色渐变
背景图片切换

4、PageScroll

说明	效果图
仿微博
主页刷新
列表刷新