前言

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

實(shí)現(xiàn)效果

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

需求分析

• 當(dāng)整體向上滑動(dòng)時(shí)，優(yōu)先 Scroll 向上滑動(dòng)。
• 當(dāng)整體向下滑動(dòng)時(shí)，優(yōu)先 Scroll 向下滑動(dòng)。

技術(shù)實(shí)現(xiàn)

1. 首先需要實(shí)現(xiàn)基礎(chǔ)頁(yè)面布局，直接使用 Scroll 嵌套 List 布局。將 List 用 Tab 布局嵌套起來(lái)。

Scroll(this.scroller) {
          Column() {
            Text("內(nèi)容")
              .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('好的')

            }
            }

這里布局比較簡(jiǎn)單，使用兩個(gè) tab 用來(lái)切換布局。外層使用 Scroll 包裹，其中一個(gè) tab 的里面使用 List 布局。相信這對(duì)大多人來(lái)說(shuō)沒(méi)有什么難度。

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

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

3. 這時(shí)不管怎么上下滑動(dòng)，里面的 List 都不會(huì)滑動(dòng)，只讓外層的 Scroll 組件滑動(dòng)。接下來(lái)處理 List 的滑動(dòng)事件。
4. 首先定義一個(gè)枚舉類型，用來(lái)標(biāo)記滑動(dòng)位置。

enum ScrollPosition {
  top,
  center,
  bottom
}

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

.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}
                    })

6. 再看外層 Scroll 的滑動(dòng)方法監(jiān)聽(tīng)，同樣也是分別實(shí)現(xiàn)這三種方法，不過(guò)注意onScrollFrameBegin 里面返回值和 List 的不同，當(dāng) Scroll 滑動(dòng)到底部活著頂部時(shí)，Scroll 不再滑動(dòng)，注意看返回值為 0，否則 Scroll 才滑動(dòng)。

.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 }
        })

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

總結(jié)

本文主要是根據(jù)實(shí)際需求實(shí)現(xiàn)的滑動(dòng)效果，每次都優(yōu)先讓 Scroll 滑動(dòng)，還有更多的滑動(dòng)場(chǎng)景都可以用這種方式的思路解決，主要通過(guò)不同的判斷條件即可實(shí)現(xiàn)。例如向下滑動(dòng)時(shí)優(yōu)先讓 List 滑動(dòng)，然后再讓 Scroll 滑動(dòng)。學(xué)會(huì)的小伙伴趕緊動(dòng)手試試吧！