介绍
本示例介绍使用了Tab组件实现自定义增删Tab页签的功能。该场景多用于浏览器等场景。
效果图预览
使用说明:
- 点击新增按钮,新增Tab页面。
- 点击删除按钮,删除Tab页面。
实现思路
- 设置Tab组件的barHeight为0,隐藏组件自带的TabBar。
Tabs() {...}.barHeight(0) // 隐藏tab组件自带的tabbar
- 使用@Link修饰符,将自定义TabBar组件和Tab组件通过focusIndex和tabArray进行双向绑定。
//TabSheetComponent.ets@Componentstruct TabSheetComponent {@Link tabArray: Array@Link focusIndex: numberbuild() {...}}//HandleTabs.ets@Componentstruct HandleTabs {@State tabArray: Array = [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.etsImage('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 NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05
《鸿蒙开发学习手册》:https://qr21.cn/FV7h05
如何快速入门:https://qr21.cn/FV7h05
- 基本概念
- 构建第一个ArkTS应用
- ……
开发基础知识:https://qr21.cn/FV7h05
- 应用基础知识
- 配置文件
- 应用数据管理
- 应用安全管理
- 应用隐私保护
- 三方应用调用管控机制
- 资源分类与访问
- 学习ArkTS语言
- ……
基于ArkTS 开发:https://qr21.cn/FV7h05
- Ability开发
- UI开发
- 公共事件与通知
- 窗口管理
- 媒体
- 安全
- 网络与链接
- 电话服务
- 数据管理
- 后台任务(Background Task)管理
- 设备管理
- 设备使用信息统计
- DFX
- 国际化开发
- 折叠屏系列
- ……
大厂鸿蒙面试题:https://qr21.cn/FV7h05
鸿蒙开发面试大盘集篇(共计319页):https://qr21.cn/FV7h05
1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向