鸿蒙应用开发之通过ListItemGroup、nestedScroll实现商城活动可折叠分组滚动效果

IT充电站2025-12-25 10:04

通过ListItemGroup、nestedScroll实现商城活动可折叠分组滚动效果

通过ListItemGroup、nestedScroll实现商城活动可折叠分组滚动效果

默认宣传封面

当上拉时候大导航吸顶

继续上拉小导航吸灯并且会随着拉上切换小导航

效果预览：

实现思路：

1、根据效果图颜色先实现红、蓝、列表布局

2、给最外层加上Scroll实现嵌套滚动，最初上拉红色慢慢隐藏、绿色吸灯

3、给List增加ListItemGroup分组实现小导航吸顶效果

完整代码：

scss 复制代码

@Entry
@Component
struct Index {

  @Builder GroupTitleBuilder(text: string) {
    // 列表分组的头部组件，对应联系人分组A、B等位置的组件
    Text(text)
      .fontSize(20)
      .backgroundColor('#fff1f3f5')
      .width('100%')
      .padding(5)
  }

  build() {
    // 核心1⭐️：多层嵌套滚动
    Scroll() {
      Column() {
        // 红色
        Text().width('100%').height(100).backgroundColor(Color.Red)
        // 蓝色
        Text().width('100%').height(50).backgroundColor(Color.Blue)
        // 列表
        List() {
          // 分组
          ForEach('ABCDEF'.split(''), (title:string) => {
            ListItemGroup({ header: this.GroupTitleBuilder(title) }) {
              // 每个分组下面的内容（咱们这里每个分组内容一样）
              ForEach('123456'.split(''), (item:string) => {
                ListItem() {
                  Text(item).height(50).fontSize(30)
                }
              })
              // 每个分组下面的内容（咱们这里每个分组内容一样）
            }.divider({strokeWidth:2,color:Color.Red})
          })
          // 分组

        }.sticky(StickyStyle.Header)
        // 核心2⭐：上拉黄色慢慢消失、蓝色一直在  也就是减去蓝色高度
        .height('calc(100% - 50vp)')
        // 核心3⭐️：向前向后滚动模式 -> 实现与父组件的滚动联动
        .nestedScroll({
          scrollForward: NestedScrollMode.PARENT_FIRST, // 上拉
          scrollBackward: NestedScrollMode.SELF_FIRST   // 下拉
          // 不管父-SELF_ONLY、SELF_FIRST-到边缘管父、PARENT_FIRST-到边缘管子、PARALLEL-父子同时
          // 详细 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-appendix-enums-V13#nestedscrollmode10
        })
      }
    }
  }
}

鸿蒙开发者班级