HarmonyOS NEXT应用元服务常见列表操作Tabs吸顶场景

鸿蒙时代

发布于 2025-6-28 11:37

浏览

0收藏

Tabs吸顶场景

场景描述

Tabs嵌套List的吸顶效果，常用于新闻、资讯类应用的首页。

本场景以Tabs页签首页内容为例，在首页TabContent的内容区域使用List组件配合其它组件，构建下方列表数据内容。进入页面后，向上滑动内容，中间Tabs页签区域实现吸顶展示的效果。

页面整体结构图	页面效果图

实现原理

Tabs组件可以在页面内快速实现视图内容的切换，让用户能够聚焦于当前显示的内容，并对页面内容进行分类，提高页面空间利用率。

通过Tabs组件，配合使用Stack、Scroll、Search以及List等基础组件构建完整页面，再使用List组件的nestedScroll属性，结合calc计算高度，实现中间Tabs页签区域吸顶展示的效果。

开发步骤

1.构建Tabs的自定义tabBar内容。

2.示例

.@Builder
.tabBuilder(img: Resource, title: Resource, index: number) {
.  Column() {
.    Image(img)
.      // ...
.      .fillColor(this.currentIndex === index ? '#0a59f7' : '#66000000')
.    Text(title)
.      // ...
.      .fontColor(this.currentIndex === index ? '#0a59f7' : '#66000000')
.  }
.  // ...
.  .onClick(() => {
.    this.currentIndex = index;
.    this.tabsController.changeIndex(this.currentIndex);
.  })
.}
ManagerPage.ets
.Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
.  TabContent() {
.    // ...
.  }
.  .tabBar(this.tabBuilder($r('app.media.mine'), $r('app.string.tabBar1'), 0))
.
.  // ...
.}
.// ...
..onChange((index: number) => {
.  this.currentIndex = index;
.})

ManagerPage.ets

实现效果：

HarmonyOS NEXT应用元服务常见列表操作Tabs吸顶场景-鸿蒙开发者社区

3.构建顶部搜索区域。

.Row() {
.  Image($r('app.media.app_icon'))
.    // ...
.  Search({
.    placeholder: 'guess you want to search...',
.  })
.    .searchButton('search', { fontSize: 14 })
.    // ...
.  Text('more')
.    // ...
.}

ManagerPage.ets

实现效果：

HarmonyOS NEXT应用元服务常见列表操作Tabs吸顶场景-鸿蒙开发者社区

4.图片占位区域、自定义导航内容及列表内容构建。

.// Home page content.
.Scroll(this.scrollController) {
.  Column() {
.    // Image position-holder area
.    Image($r('app.media.pic5'))
.      // ...
.
.    Column() {
.      // Customize tabBar.
.      Row({ space: 16 }) {
.        ForEach(this.tabArray, (item: string, index: number) => {
.          Text(item)
.            .fontColor(this.currentTabIndex === index ? '#0a59f7' : Color.Black)
.            .onClick(() => {
.              // Click to switch tabs content.
.              this.contentTabController.changeIndex(index);
.              this.currentTabIndex = index;
.            })
.        }, (item: string) => item)
.      }
.      // ...
.
.      // Tabs
.      Tabs({ barPosition: BarPosition.Start, controller: this.contentTabController }) {
.        TabContent() {
.          List({ space: 10, scroller: this.listScroller }) {
.            CustomListItem({
.              imgUrl: $r('app.media.pic1'),
.              title: $r('app.string.manager_content')
.            })
.            // ...
.          }
.          // ...
.        }
.        .tabBar('follow')
.        // ...
.      }
.      // ...
.    }
.    // ...
.  }
.}
.// ...
..scrollBar(BarState.Off) // Hide the scroll bar

ManagerPage.ets

实现效果：

HarmonyOS NEXT应用元服务常见列表操作Tabs吸顶场景-鸿蒙开发者社区

5.给List组件添加的nestedScroll属性，结合calc计算实现中间自定义Tab页签区域吸顶展示的效果

.Tabs({ barPosition: BarPosition.Start, controller: this.contentTabController }) {
.  TabContent() {
.    List({ space: 10, scroller: this.listScroller }) {
.      // ...
.    }
.    // ...
.    // Customize the tabBar to achieve ceiling suction by combining the nestedScroll attribute with Calc to calculate height.
.    .nestedScroll({
.      scrollForward: NestedScrollMode.PARENT_FIRST, // Set the effect of scrolling the component to the end: The parent component rolls first, and then rolls itself to the edge
.      scrollBackward: NestedScrollMode.SELF_FIRST // Set the effect of rolling the component to the start end: Rolls itself first, and then the parent component scrolls to the edge
.    })
.  }
.  .tabBar('follow')
.  // ...
.}
..barHeight(0)
..height('calc(100% - 100vp)')
..onChange((index: number) => {
.  this.currentTabIndex = index;
.})

ManagerPage.ets

实现效果