介绍
本示例介绍使用了Tab组件实现自定义增删Tab页签的功能。该场景多用于浏览器等场景。
效果图预览
使用说明：
- 点击新增按钮，新增Tab页面。
- 点击删除按钮，删除Tab页面。
实现思路
- 设置Tab组件的barHeight为0，隐藏组件自带的TabBar。
Tabs() {
...
}
.barHeight(0) // 隐藏tab组件自带的tabbar
- 使用@Link修饰符，将自定义TabBar组件和Tab组件通过focusIndex和tabArray进行双向绑定。
//TabSheetComponent.ets
@Component
struct TabSheetComponent {
@Link tabArray: Array<number>
@Link focusIndex: number
build() {
...
}
}
//HandleTabs.ets
@Component
struct HandleTabs {
@State tabArray: Array<number> = [0]; // 控制页签渲染的数组
@State focusIndex: number = 0; // Tabs组件当前显示的页签下标
build() {
...
TabSheetComponent({ tabArray: $tabArray, focusIndex: $focusIndex })
Tabs({ index: this.focusIndex }) {
ForEach(this.tabArray,()=>{
...
})
}
...
}
}
- 在自定义TabBar中修改focusIndex和tabArray的值时，Tab组件根据数据变化进行对应UI变更
//TabSheetComponent.ets
Image('add') // 新增页签
.onClick(() => {
this.tabArray.push(item)
})
...
Image('close') // 关闭指定索引页签
.onClick(() => {
this.tabArray.splice(index, 1)
})
...
this.focusIndex = index; // 跳转到指定索引值
高性能知识点
本示例使用了ForEach进行数据懒加载，ForEach第三个入参keyGenerator唯一时，动态修改ForEach时，可降低渲染开销。
工程结构&模块类型
handletabs // har包
|---model
| |---constantsData.ets // 定义常量数据
|---pages
| |---HandleTabs.ets // 增删tab页签功能实现页面
| |---MenuBar.ets // 工具栏
| |---TabSheetComponent.ets // 自定义TabBar组件
模块依赖
当前场景依赖common模块的FunctionDescription组件，主要用于功能场景文本介绍。详细可参考FunctionDescription文件。
参考资料
ForEach使用说明
Tabs组件使用说明
最后分享一份鸿蒙（HarmonyOS）开发学习指南需要的可以扫码免费领取！！！
《鸿蒙（HarmonyOS）开发学习指南》
第一章 快速入门
1、开发准备
2、构建第一个ArkTS应用（Stage模型）
3、构建第一个ArkTS应用（FA模型）
4、构建第一个JS应用（FA模型）
5、…
第二章 开发基础知识
1、应用程序包基础知识
2、应用配置文件（Stage模型）
3、应用配置文件概述（FA模型）
4、…
第三章 资源分类与访问
1、 资源分类与访问
2、 创建资源目录和资源文件
3、 资源访问
4、…
第四章 学习ArkTs语言
1、初识ArkTS语言
2、基本语法
3、状态管理
4、其他状态管理
5、渲染控制
6、…
第五章 UI开发
1.方舟开发框架（ArkUI）概述
2.基于ArkTS声明式开发范式
3.兼容JS的类Web开发范式
4…
第六章 Web开发
1.Web组件概述
2.使用Web组件加载页面
3.设置基本属性和事件
4.在应用中使用前端页面JavaScript
5.ArkTS语言基础类库概述
6.并发
7…
11.网络与连接
12.电话服务
13.数据管理
14.文件管理
15.后台任务管理
16.设备管理
17…
第七章 应用模型
1.应用模型概述
2.Stage模型开发指导
3.FA模型开发指导
4…
