三十、【鸿蒙 NEXT】实现吸顶效果

zhujian826372026-01-27 16:04

【前言】

在开发过程中我们可能会实现如下的吸顶效果，当向上滑动时，列表不滑动，只滑动列表上方的布局，当上方布局隐藏后，再滑动列表。当向下滑动时，先滑动列表，当列表滑到头时，再将上方的布局拉下来，效果如下：

1、整体布局

顶部是一个图片区域，这里用蓝色背景图表示

中间是一个tab页，用来切换内容

最下边是一个list，展示tab中的条目，有滚动条

2、使用List组件 + nestedScroll属性实现吸顶效果

这里将顶部图片区域，及tab作为两个ListItem，tab组件内部也是一个List，并给tab组件的List配置如下属性

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

属性值表示向上滑动时以父List滑动为先，向下滑动时以自己滑动为先

3、完整代码如下：

javascript 复制代码

@Entry
@Component
struct ScrollPage {
  @State msgList:MsgInfo[] =[]

  aboutToAppear(): void {
    let arr:MsgInfo[] = []
    for (let index = 0; index < 20; index++) {
      let msg:MsgInfo = {icon:$r('app.media.heart2'), name:`好友1-${index}`}
      arr.push(msg)
    }
    this.msgList = arr
  }

  build() {
    Column(){
      List(){
        ListItem(){
          Image($r('app.media.background')).width('100%').height(100)
        }
        ListItem(){
          Tabs(){
            TabContent(){
              List() {
                ForEach(this.msgList,(item:MsgInfo)=> {
                  ListItem(){
                    Row(){
                      Image(item.icon).width(40).height(40)
                      Text(item.name)
                    }
                  }
                })
              }.width('100%').height(600)
              .nestedScroll({
                scrollForward:NestedScrollMode.PARENT_FIRST,
                scrollBackward:NestedScrollMode.SELF_FIRST
              }).scrollBar(BarState.Off)
            }.tabBar('好友1').align(Alignment.Top)
            TabContent(){
            }.tabBar('好友2')
          }
        }
      }.scrollBar(BarState.Off)
      .edgeEffect(EdgeEffect.None)
    }
    .height('100%')
    .width('100%')
  }
}

interface MsgInfo {
  icon:ResourceStr
  name:string
}