前言
最近开发鸿蒙APP，发现系统的标签栏功能太少，于是自定义了一个，具体内容可查看【鸿蒙开发】自定义顶部Tabs标签栏，支持字体大小和颜色渐变，且该库已发布到OpenHarmony三方库中心仓page_tabs，下面说说该库的具体内容。
介绍
PageTabs是一个自定义Tabs标签栏分页组件
PageScroll是一个支持Header，标签悬停的分页组件
特性
- 标签支持文字、图片、图文混合等多种样式
- 标签支持文字大小、图片大小缩放，文字颜色渐变
- 标签背景支持颜色、图片、自定义Builder
- 标签支持设置左右间距
- 指示器支持设置颜色、图片、自定义Builder等
- 支持页面滑动与指示器联动
安装教程
方法一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。
建议：在使用的模块路径下进行执行命令。
ohpm install @quint/page_tabs
方法二：在工程的oh-package.json5中设置三方包依赖，配置示例如下：
"dependencies": { "@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配置
| 属性 | 说明 |
|---|---|
| title | 标题 |
| titleWidth | 标题宽度 |
| titleHeight | 标题高度 |
| image | 图片 |
| imageWidth | 图片宽度 |
| imageHeight | 图片高度 |
| imagePosition | 图片相对标题的位置（上下左右） |
| margin | 图片与标题的间距 |
2、标签配置
| 说明 | 效果图 |
|---|---|
| normalFont | 默认字体 |
| selectFont | 选中字体 |
| normalColor | 默认颜色 |
| selectColor | 选中颜色 |
| backgroundColor | 标签+指示器整体背景颜色 |
| backgroundImage | 标签+指示器整体背景图片 |
| backgroundBuilder | 标签+指示器整体自定义背景组件 |
| contentLeft | 标签整体左边距 |
| contentRight | 标签整体右边距 |
| tabMargin | 标签间距 |
| tabHeight | 标签整体高度 |
| horizontalAlign | 标签水平对齐方式 |
| verticalAlign | 标签垂直对齐方式 |
| isImageScale | 是否开启图片缩放 |
| imageScale | 图片缩放比例 |
| isSizeScale | 是否开启字体大小缩放 |
| isColorGradient | 是否开启文字颜色渐变 |
| isAverageTab | 标签数量较少时是否均分 |
3、指示器配置
| 属性 | 说明 |
|---|---|
| image | 图片 |
| color | 颜色 |
| width | 宽度 |
| height | 高度 |
| radius | 圆角 |
| margin | 距离标签间距 |
4、其他配置
| 属性 | 说明 |
|---|---|
| defaultIndex | 默认索引 |
| cacheCount | 缓存页面数量 |
| controller | 控制器 |
| listener | 监听器 |
| pageBuild | 子页面Build |
效果图
1、标签样式
| 说明 | 效果图 |
|---|---|
| 文本 |  |
| 图片 |  |
| 图文混排 |  |
| 宽度均分 |  |
| 标签覆盖列表 |  |
2、指示器样式
| 说明 | 效果图 |
|---|---|
| 宽度固定 |  |
| 宽度跟随 |  |
| 颜色 |  |
| 图片 |  |
3、背景
| 说明 | 效果图 |
|---|---|
| 背景颜色 |  |
| 背景图片 |  |
| 背景颜色渐变 |  |
| 背景图片切换 |  |
4、PageScroll
| 说明 | 效果图 |
|---|---|
| 仿微博 |  |
| 主页刷新 |  |
| 列表刷新 |  |
