HarmonyOS实战：Tab顶部滑动悬停功能实现原创

IT小码

发布于 2025-6-16 13:56

浏览

0收藏

前言

日常开发过程中，遇到这种 Scroll 嵌套 List 列表滑动顶部悬停的场景十分常见，在鸿蒙开发时也正好实现了这个功能，本篇文章将带你一步步实现 Tab 顶部悬停的效果，建议点赞收藏！

实现效果

先看本文的最终实现效果如下：

HarmonyOS实战：Tab顶部滑动悬停功能实现-鸿蒙开发者社区

需求分析

当整体向上滑动时，优先 Scroll 向上滑动。
当整体向下滑动时，优先 Scroll 向下滑动。

技术实现

首先需要实现基础页面布局，直接使用 Scroll 嵌套 List 布局。将 List 用 Tab 布局嵌套起来。

 Scroll(this.scroller) {
          Column() {
            Text("内容")
              .textAlign(TextAlign.Center)
              .fontColor(Color.White)
              .backgroundColor(this.themColor.value)
              .width('100%')
              .height('40%')

            Tabs({ barPosition: BarPosition.Start }) {
              TabContent() {
                Column() {
                  Refresh({refreshing:false,friction:0,offset:0}){
                    List({ space: 10, scroller: this.scrollerForList }) {
                      ForEach(this.list, (item: string) => {
                        ListItem() {
                          Text('ListItem' + item)
                            .width('100%')
                            .height('100%')
                            .borderRadius(15)
                            .fontSize(24)
                            .textAlign(TextAlign.Center)
                            .backgroundColor(Color.White)
                        }
                        .width('100%')
                        .height(100)
                      }, (item: string) => item)
                    }
                   
                  .pullToRefresh(true)
                }

              }.tabBar('你好')

              TabContent() {
                Column().width('100%').height('100%').backgroundColor('#007DFF')
              }.tabBar('好的')

            }
            }

这里布局比较简单，使用两个 tab 用来切换布局。外层使用 Scroll 包裹，其中一个 tab 的里面使用 List 布局。相信这对大多人来说没有什么难度。

搭建好基础布局后，开始处理滑动冲突问题。根据实现效果来看，每次都是让外层的 Scroll 优先滑动，需要给 List 增加拦截处理，让每次滑动优先外层 Scroll 布局滑动，这里使用nestedScroll 属性的NestedScrollMode.PARENT_FIRST，即优先父布局滑动。

 .nestedScroll({
                      scrollForward: NestedScrollMode.PARENT_FIRST,
                      scrollBackward: NestedScrollMode.PARENT_FIRST
                    })

这时不管怎么上下滑动，里面的 List 都不会滑动，只让外层的 Scroll 组件滑动。接下来处理 List 的滑动事件。
首先定义一个枚举类型，用来标记滑动位置。

enum ScrollPosition {
  top,
  center,
  bottom
}

接下来分别实现 List 的 onReachStart，onReachEnd，onScrollFrameBegin 三个方法。这个比较容易理解，滑动道顶部时，记录当前位置为顶部，滑动底部时，记录当前位置为底部，onScrollFrameBegin 表示滑动过程中的回调，根据当前滑动位置和滑动偏移量来记录是否继续滑动。

                    .onReachStart(() => {
                      this.listPosition = ScrollPosition.top
                    })
                    .onReachEnd(() => {
                      this.listPosition = ScrollPosition.bottom
                    })
                    .onScrollFrameBegin((offset: number, state: ScrollState) => {
                      if ((this.listPosition == ScrollPosition.top && offset <=0)||(this.listPosition == ScrollPosition.bottom && offset>=0)) {
                        return {offsetRemain :offset}
                      }
                      this.listPosition = ScrollPosition.center
                      return {offsetRemain:offset}
                    })

再看外层 Scroll 的滑动方法监听，同样也是分别实现这三种方法，不过注意onScrollFrameBegin 里面返回值和 List 的不同，当 Scroll 滑动到底部活着顶部时，Scroll 不再滑动，注意看返回值为 0，否则 Scroll 才滑动。

 .onReachStart(() => {
          this.listPosition = ScrollPosition.top
        })
        .onReachEnd(() => {
          this.listPosition = ScrollPosition.bottom
        })
        .onScrollFrameBegin((offset: number, _: ScrollState) => {
          if ((this.listPosition == ScrollPosition.top && offset <= 0) || (
            this.listPosition == ScrollPosition.bottom && offset >= 0)
          ) {
            return { offsetRemain: 0 }
          }
          //不在底部
          this.listPosition = ScrollPosition.center
          return { offsetRemain: offset }
        })

根据 List 组件和 Scroll 组件的滑动监听，用来判断哪种状态下 Scroll 优先滑动，当 Scroll 滑动到底部活顶部时，通过返回值赋值为 0 ，阻止 Scroll 滑动，将滑动事件交个内部的 List 滑动。注意 List 通过设置nestedScroll 将滑动事件优先让外层 Scroll 处理。所以一开始是外层的 Scroll 先滑动。