# page_tabs
**Repository Path**: harmonyos4me/page_tabs
## Basic Information
- **Project Name**: page_tabs
- **Description**: 鸿蒙标签栏组件
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-12-13
- **Last Updated**: 2025-12-13
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 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
