PagerSlidingTabStrip

简介

PagerSlidingTabStrip是一个用于在不同页面之间进行导航的交互式指示器。本库基于 PagerSlidingTabStrip 原库进行适配，使其可以运行在 OpenHarmony，并沿用其现有用法和特性。

效果展示：

下载安装

ohpm install @ohos/pagerslidingtabstrip

OpenHarmony ohpm环境配置等更多内容，请参考 如何安装OpenHarmony ohpm包 。

使用说明

导入并使用

import { PagerSlidingTabStrip, TabItem } from '@ohos/pagerslidingtabstrip';

...

// 页签内容
@Local contactTabs: TabItem[] = [
 { id: "gplus", image: $r('app.media.ic_launcher_gplus') },
 { id: "gmail", image: $r('app.media.ic_launcher_gmail') },
 { id: "gmaps", image: $r('app.media.ic_launcher_gmaps') },
 { id: "chrome", image: $r('app.media.ic_launcher_chrome') },
];

//自定义内容
@Builder
contactContent(tab: TabItem, index: number) {
// 可根据tab里的id区分展示不同布局的页面，在此不做示范
Column() {
  Text('PAGE' + (index + 1))
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
.backgroundColor("#DCDCDC")
}

build() {
  PagerSlidingTabStrip({
     pstsUnderlineColor: "#FF33B5E6",
     pstsTabPaddingLeftRight: 14,
     pstsIndicatorColor: "#FF33B5E6",
     pstsDividerColor: "#00000000",
     barHeight: 62,
     barBackgroundImage: $r('app.media.tabs_pattern_diagonal'),
     barBackgroundImageRepeat: ImageRepeat.XY,
     barBackgroundImageSize: { width: 5, height: 5 },
     pstsShouldExpand: false,
     tabBars: this.contactTabs,
     initialPosition: 1,
     buildTabContent: (tab, index): void => this.contactContent(tab, index)
     onPageSelected: (index) => {
        console.log(`页面选中回调: ${index}`)
     },
     onPageScrolled: (position, positionOffset, positionOffsetPixels) => {
        console.log(`页面滚动回调: position: ${position}，positionOffset: ${positionOffset}，positionOffsetPixels: ${positionOffsetPixels}`)
     },
     onPageScrollStateChanged: (state) => {
        console.log(`页面滚动状态变化回调: ${state}`)
     }
  })
}

更多详细用法请参考开源库sample页面的实现

接口说明

参数名	类型	必填	说明
tabBars	TabItem[]	是	页签栏内容
initialPosition	number	否	初始选中页签栏索引，默认：0
pstsIndicatorColor	ResourceColor	否	指示器颜色，默认：'#FF666666'
pstsUnderlineColor	ResourceColor	否	下划线颜色，默认：'#1A000000'
pstsDividerColor	ResourceColor	否	页签分隔线颜色，默认：'#1A000000'
pstsIndicatorHeight	number	否	指示器高度，默认：8
pstsUnderlineHeight	number	否	页签栏下划线高度，默认：2
pstsDividerPadding	number	否	分隔线上下内边距，默认：12
pstsTabPaddingLeftRight	number	否	页签左右内边距，默认：24
pstsScrollOffset	number	否	滚动偏移量，默认：52
touchedTabBackground	ResourceColor	否	页签在按压状态下的背景颜色，默认：'#6633B5E5'
selectedTabBackground	ResourceColor	否	页签在选中状态下的背景颜色，默认：Color.Transparent
pstsShouldExpand	boolean	否	是否平均分配页签宽度，默认：false
pstsTextAllCaps	boolean	否	页签文本是否全大写，默认：true
tabTextSize	number | string | Resource	否	页签文本大小，默认：12
tabTextColor	ResourceColor	否	页签文本颜色，默认：'#FF666666'
tabTextFontFamily	string | Resource	否	页签文本字体族
tabTextFontWeight	string | number | FontWeight	否	页签文本字体粗细，默认：600
tabTextFontStyle	FontStyle	否	页签文本字体样式，默认：FontStyle.Normal
tabImgWidth	number	否	页签图标宽度，默认：35
tabImgHeight	number	否	页签图标高度，默认：35
barHeight	number	否	页签栏高度，默认：48
barBackgroundImage	ResourceStr | image.PixelMap	否	页签栏背景图，默认：''
barBackgroundImageRepeat	ImageRepeat | undefined	否	页签栏背景图重复样式，默认：undefined
barBackgroundImageSize	SizeOptions | ImageSize	否	页签栏背景图宽高，默认：ImageSize.Auto

方法	参数	返回	必填	说明
buildTabContent	tab: TabItem, index: number	void	是	自定义页签页面内容，需传入自定义构建函数（@Builder装饰的方法）
onPageSelected	index: number	void	否	页面选中索引回调
onPageScrolled	position: number, positionOffset: number, positionOffsetPixels: number	void	否	页面滚动回调。 - position：基准页面索引，可见页面中位于左侧的页面索引，如从0滑到1时的第0页，从1滑到0是的第0页； - positionOffset：position右侧相邻页面进入屏幕的比例进度，取值范围是 [0, 1)； - positionOffsetPixels：positionOffset × 页面宽度的像素值。
onPageScrollStateChanged	state: ScrollState	void	否	页面滚动状态变化回调。0：空闲状态；1：手指拖动滚动状态；2：松手后惯性滚动状态。（从API version 20开始支持。）

TabItem属性说明：

名称	类型	只读	可选	说明
id	string	否	否	页签唯一标识
text	string	否	是	页签展示文字，若设置image，则不展示文字
image	Resource	否	是	页签展示图标

约束与限制

在下述版本验证通过：

• DevEco Studio: 6.0.1 Release（6.0.1.260）, SDK: API20(6.0.0.47)

目录结构

|---- ohos_PagerSlidingTabStrip  
|     |---- entry  # 示例代码文件夹
|     |---- library  # ohos_PagerSlidingTabStrip 库文件夹
|     |     |   └─src
|     |     |   │---└─main  
|     |     |   |----   └─ets
|     |     |   │----      └──components  #默认存在的目录
|     |     |                 │----PagerSlidingTabStrip.ets #滑动式页签组件
|     |     |                 │----SlidingTabController.ets #滑动页签控制器
|     |     |---- index.ets  # 对外接口
|     |---- README.md  # 安装使用方法    
|     |---- README_zh.md  # 安装使用方法                  

贡献代码

使用过程中发现任何问题都可以提 Issue ，当然，也非常欢迎发 PR 共建。

开源协议

本项目基于 Apache License 2.0 ，请自由地享受和参与开源。