介绍

本示例介绍使用了Tab组件实现自定义增删Tab页签的功能。该场景多用于浏览器等场景。

效果图预览

使用说明

  1. 点击新增按钮,新增Tab页面。
  2. 点击删除按钮,删除Tab页面。

实现思路

  1. 设置Tab组件的barHeight为0,隐藏组件自带的TabBar。
Tabs() {
...
}
.barHeight(0) // 隐藏tab组件自带的tabbar
  1. 使用@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,()=>{
...
})
} ...
}
}
  1. 在自定义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组件使用说明

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing,不定期分享原创知识。
  • 想要获取更多完整鸿蒙最新VIP学习资源,请移步前往小编:https://qr21.cn/FV7h05

HarmonyOS NEXT应用开发之Tab组件实现增删Tab标签的更多相关文章

  1. Android开发之Menu组件

    菜单Menu大致分为三种类型:选项菜单(OptionsMenu),上下文菜单(ContextMenu),子菜单(SubMenu). 1.选项菜单 在一个Activity界面中点击手机Menu键,在屏幕 ...

  2. Android安全开发之ZIP文件目录遍历

    1.ZIP文件目录遍历简介 因为ZIP压缩包文件中允许存在“../”的字符串,攻击者可以利用多个“../”在解压时改变ZIP包中某个文件的存放位置,覆盖掉应用原有的文件.如果被覆盖掉的文件是动态链接s ...

  3. Android开发之ViewPager+ActionBar+Fragment实现响应式可滑动Tab

     今天我们要实现的这个效果呢,在Android的应用中十分地常见,我们可以看到下面两张图,无论是系统内置的联系人应用,还是AnyView的阅读器应用,我们总能找到这样的影子,当我们滑动屏幕时,Tab可 ...

  4. Android开发之旅5:应用程序基础及组件

    引言 上篇Android开发之旅:应用程序基础及组件介绍了应用程序的基础知识及Android的四个组件,本篇将介绍如何激活组关闭组件等.本文的主题如下: 1.激活组件:意图(Intents) 1.1. ...

  5. Android开发之旅4:应用程序基础及组件

    引言 为了后面的例子做准备,本篇及接下来几篇将介绍Android应用程序的原理及术语,这些也是作为一个Android的开发人员必须要了解,且深刻理解的东西.本篇的主题如下: 1.应用程序基础 2.应用 ...

  6. SPA项目开发之tab页实现

    实现思路及细节 1.利用前面博客所讲的Vuex的知识:定义几个变量 Options:存放tab页对象的容器(主要是路由路径以及tab页的名字) activeIndex:被激活的tab页路由路径 sho ...

  7. C# WinForm 技巧八:界面开发之“WeifenLuo.WinFormsUI.Docking+OutLookBar” 使用

    概述      最近几天一直在关注WinFrom方面的文章主要还是园子里伍华聪的博客,在看看我们自己写的项目差不忍赌啊,有想着提炼一下项目的公共部分,公共部分有分为 界面,类库两方面,今天主要是把界面 ...

  8. C# WinForm 技巧八:界面开发之“WeifenLuo.WinFormsUI.Docking+OutLookBar” 使用

    概述 转自 http://www.cnblogs.com/luomingui/archive/2013/09/19/3329763.html 最近几天一直在关注WinFrom方面的文章 有想着提炼一下 ...

  9. Android Studio快速开发之道

    概述 现如今开发越来越追求效率和节奏,节省出时间做更多的事情,除了开发技术上的封装等,开发工具的使用技巧也是很重要的,今天就根据自己的经验来给大家介绍一下Android Studio快速开发之道. P ...

  10. Cocos2d-x 3.x游戏开发之旅

    Cocos2d-x 3.x游戏开发之旅 钟迪龙 著   ISBN 978-7-121-24276-2 2014年10月出版 定价:79.00元 516页 16开 内容提要 <Cocos2d-x ...

随机推荐

  1. C++自定义比较函数的bug

    auto cmp = [] (int x, int y) {return true;}; priority_queue<int, vector<int> , cmp> q; 报 ...

  2. 04_QT_Windows开发环境搭建

    FFmpeg 为什么选择FFmpeg? 每个主流平台基本都有自己的音视频开发库(API),用以处理音视频数据,比如: iOS:AVFoundation.AudioUnit等 Android:Media ...

  3. DNS劫持怎么预防?

    DNS劫持,也称为域名劫持,是一种网络攻击手段,攻击者通过拦截域名解析的请求,将用户重定向到恶意站点,以达到获取用户信息或谋取非法利益的目的.DNS劫持可以分为以下几种基本类型: 1.路由器DNS劫持 ...

  4. Java中一个逐渐被遗忘的强大功能,强到你难以置信!!

    大家好,我是冰河~~ 说起Java,简单好用,但是Java中很多牛逼的技术却逐渐被遗忘了~~ 在Java语言出现之前,很多系统都是使用C和C++开发的.Java出现之后,由于其面向对象的思想更加符合人 ...

  5. C# URL参数编码

    string s = "lw123abc测试信息!@#¥%--&*()--+"; Console.WriteLine("原数据:\t\t" + s); ...

  6. Oracle 关闭 DBLink

    alter system set open_links=0 sid ='*' scope=spfile; System altered. alter system set open_links_per ...

  7. KingbaseES数据库分区表添加主键与索引的建议

    一.初始化测试环境 # 数据库版本信息 KingbaseES V008R006C007B0012 on x86_64-pc-linux-gnu, compiled by gcc (GCC) 4.1.2 ...

  8. Python---flask框架实现免密登录功能

    思路总结: html代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta c ...

  9. 【WCH以太网接口系列芯片】CH9121\20的使用和测试

    本篇文章将介绍沁恒微电子的以太网转接芯片CH9121(CH9120和CH9121使用上没有区别,注意配置工具不一样,可以在沁恒微电子官网自行下载测试),该芯片支持网口和串口相互透传,可以通过串口AT指 ...

  10. #线性筛,斐波那契数列,GCD#BZOJ 2813 奇妙的Fibonacci

    题目 有一个斐波那契数列,满足 \[F_n=\begin{cases}1\qquad (n==1)\\1\qquad (n==2)\\F_{n-1}+F_{n-2}\qquad (n>2)\en ...