鸿蒙next软件开发：tabContent/tabBar上显示并响应滑动事件案例

最新推荐文章于 2025-05-21 14:07:45 发布

原创

最新推荐文章于 2025-05-21 14:07:45 发布 · 996 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #前端 #鸿蒙 #开发语言 #鸿蒙系统 #nginx

介绍

本示例实现了tabContent内容可以在tabBar上显示并且tabBar可以响应滑动事件的功能。

效果图预览

使用说明

点击播放按钮进行视频播放，按住进度条按钮和进度条下方区域可以拖动进度条，更改视频播放进度。

实现思路

原生的Tabs组件，tabContent内容无法在tabBar上显示。本案例实现tabContent内容可以在tabBar上显示并且tabBar可以响应滑动事件的功能主要是通过将Tabs组件的barHeight设置为0，重新自定义tabBar。将TabContent的内容分为上下两部分，上半部高度为100% - 60vp，存放video组件，下部分高度为60vp，存放进度条。将Tabs组件的zIndex属性设置为2，tabContent的视图就可以堆叠在自定义tabBar之上。再设置hitTestBehavior属性使被覆盖的tabBar可以响应点击事件。这样就实现tabBar可以响应滑动事件并且tabBar可以响应点击事件的效果。

创建Tabs组件，将barHeight设置为0。源码参考TabContentOverFlow.ets。 点击→【纯血版鸿蒙全套最新学习资料】希望这一份鸿蒙学习资料能够给大家带来帮助~

Tabs({ index: this.index, controller: this.tabsController }) {
   ...
}
// TODO: 知识点：将zIndex设置为2，TabContent将在tabBar之上，显示的效果就是TabContent外溢的部分在tabBar上。
.zIndex(CONFIGURATION.TABCONTENTOVERFLOWZINDEX)
.scrollable(false)
.barHeight($r('app.integer.tabcontentoverflow_tabs_barheight'))
.animationDuration(CONFIGURATION.T