前言

日常開發(fā)過程中，遇到這種 Scroll 嵌套 List 列表滑動頂部懸停的場景十分常見，在鴻蒙開發(fā)時也正好實現(xiàn)了這個功能，本篇文章將帶你一步步實現(xiàn) Tab 頂部懸停的效果，建議點贊收藏！

實現(xiàn)效果

先看本文的最終實現(xiàn)效果如下：

需求分析

當整體向上滑動時，優(yōu)先 Scroll 向上滑動。
當整體向下滑動時，優(yōu)先 Scroll 向下滑動。

技術實現(xiàn)

首先需要實現(xiàn)基礎頁面布局，直接使用 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 布局。相信這對大多人來說沒有什么難度。

搭建好基礎布局后，開始處理滑動沖突問題。根據(jù)實現(xiàn)效果來看，每次都是讓外層的 Scroll 優(yōu)先滑動，需要給 List 增加攔截處理，讓每次滑動優(yōu)先外層 Scroll 布局滑動，這里使用nestedScroll 屬性的NestedScrollMode.PARENT_FIRST，即優(yōu)先父布局滑動。

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

這時不管怎么上下滑動，里面的 List 都不會滑動，只讓外層的 Scroll 組件滑動。接下來處理 List 的滑動事件。
首先定義一個枚舉類型，用來標記滑動位置。

enum ScrollPosition {
  top,
  center,
  bottom
}

接下來分別實現(xiàn) List 的 onReachStart，onReachEnd，onScrollFrameBegin 三個方法。這個比較容易理解，滑動道頂部時，記錄當前位置為頂部，滑動底部時，記錄當前位置為底部，onScrollFrameBegin 表示滑動過程中的回調，根據(jù)當前滑動位置和滑動偏移量來記錄是否繼續(xù)滑動。

.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 的滑動方法監(jiān)聽，同樣也是分別實現(xiàn)這三種方法，不過注意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 }
        })

根據(jù) List 組件和 Scroll 組件的滑動監(jiān)聽，用來判斷哪種狀態(tài)下 Scroll 優(yōu)先滑動，當 Scroll 滑動到底部活頂部時，通過返回值賦值為 0 ，阻止 Scroll 滑動，將滑動事件交個內部的 List 滑動。注意 List 通過設置nestedScroll 將滑動事件優(yōu)先讓外層 Scroll 處理。所以一開始是外層的 Scroll 先滑動。