HarmonyOS鸿蒙Next中通过Scroll、nestedScroll实现京东秒杀嵌套滚动效果

HarmonyOS鸿蒙Next中通过Scroll、nestedScroll实现京东秒杀嵌套滚动效果 通过Scroll、nestedScroll实现京东秒杀嵌套滚动效果 previewableImage

当上拉时，外层先滚动慢慢的黄色签到图片会消失、然后List列表可以继续上拉


更多关于HarmonyOS鸿蒙Next中通过Scroll、nestedScroll实现京东秒杀嵌套滚动效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

效果预览：

预览

实现思路：

  1. 实现页面结构布局，红、黄、绿、列表
@Entry
@Component
struct Index {
  build() {
    Column() {
      // 红色（不要放到Column   因为后续下面黄色、蓝、列表需要滚动  而这个红色不需要）
      Text().width('100%').height(150).backgroundColor(Color.Red)
      // 下述后续要上拉滚动
      Column() {
        // 黄色签到
        Text().width('100%').height(100).backgroundColor(Color.Yellow)
        // 蓝色 
        Text().width('100%').height(50).backgroundColor(Color.Blue)
        // 列表
        List() {
          ForEach('0123456789abcdefg'.split(''), (item:string) => {
            ListItem() {
              Text(item).height(50).fontSize(30)
            }
          })
        }.layoutWeight(1).divider({strokeWidth:2,color:Color.Red})
      }
    }
  }
}
  1. 实现黄色、蓝色、列表上拉滚动 通过Scroll容器
@Entry
@Component
struct Index {
  build() {
    Column() {
      // 红色
      Text().width('100%').height(150).backgroundColor(Color.Red)
      // 核心1⭐️：多层嵌套滚动
      Scroll() {
        Column() {
          // 黄色
          Text().width('100%').height(100).backgroundColor(Color.Yellow)
          // 蓝色
          Text().width('100%').height(50).backgroundColor(Color.Blue)
          // 列表
          List() {
            ForEach('0123456789abcdefg'.split(''), (item:string) => {
              ListItem() {
                Text(item).height(50).fontSize(30)
              }
            })
          }.divider({strokeWidth:2,color:Color.Red})
        }
      }.layoutWeight(1)
    }
  }
}
  1. 实现上拉黄色慢慢消失，蓝色吸顶效果
@Entry
@Component
struct Index {
  build() {
    Column() {
      // 红色
      Text().width('100%').height(150).backgroundColor(Color.Red)
      // 核心1⭐️：多层嵌套滚动
      Scroll() {
        Column() {
          // 黄色
          Text().width('100%').height(100).backgroundColor(Color.Yellow)
          // 蓝色
          Text().width('100%').height(50).backgroundColor(Color.Blue)
          // 列表
          List() {
            ForEach('0123456789abcdefg'.split(''), (item:string) => {
              ListItem() {
                Text(item).height(50).fontSize(30)
              }
            })
          }.divider({strokeWidth:2,color:Color.Red})
          // 核心2⭐：上拉黄色慢慢消失、蓝色一直在  也就是减去蓝色高度
          .height('calc(100% - 50vp)')
        }
      }.layoutWeight(1)
    }
  }
}
  1. 通过nestedScroll属性实现外层滚动Scroll、内层List滚动控制
@Entry
@Component
struct Index {
  build() {
    Column() {
      // 红色
      Text().width('100%').height(150).backgroundColor(Color.Red)
      // 核心1⭐️：多层嵌套滚动
      Scroll() {
        Column() {
          // 黄色
          Text().width('100%').height(100).backgroundColor(Color.Yellow)
          // 蓝色
          Text().width('100%').height(50).backgroundColor(Color.Blue)
          // 列表
          List() {
            ForEach('0123456789abcdefg'.split(''), (item:string) => {
              ListItem() {
                Text(item).height(50).fontSize(30)
              }
            })
          }.divider({strokeWidth:2,color:Color.Red})
          // 核心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
          })
        }
      }.layoutWeight(1)
    }
  }
}

完整代码：

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 红色
      Text().width('100%').height(150).backgroundColor(Color.Red)
      // 核心1⭐️：多层嵌套滚动
      Scroll() {
        Column() {
          // 黄色
          Text().width('100%').height(100).backgroundColor(Color.Yellow)
          // 蓝色
          Text().width('100%').height(50).backgroundColor(Color.Blue)
          // 列表
          List() {
            ForEach('0123456789abcdefg'.split(''), (item:string) => {
              ListItem() {
                Text(item).height(50).fontSize(30)
              }
            })
          }.divider({strokeWidth:2,color:Color.Red})
          // 核心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
          })
        }
      }.layoutWeight(1)
    }
  }
}

更多关于HarmonyOS鸿蒙Next中通过Scroll、nestedScroll实现京东秒杀嵌套滚动效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，可通过Scroll组件与nestedScroll属性实现京东秒杀嵌套滚动。Scroll组件用于创建可滚动容器，nestedScroll属性用于协调父与子滚动容器的嵌套滚动行为。通过设置nestedScroll属性，可定义滚动优先级与联动规则，实现类似京东秒杀中商品列表与顶部时间轴等区域的嵌套滚动效果。

在HarmonyOS Next中，实现类似京东秒杀的嵌套滚动效果，可以充分利用ArkUI的Scroll和NestedScroll能力。从你描述和动图来看，这属于一个典型的“父容器（带顶部Banner）与子列表（商品列表）”嵌套滚动场景。

核心思路是使用Scroll组件作为外层容器，并启用其nestedScroll属性来协调内层滚动组件（如List）的滚动行为。

1. 关键实现方案：

通常，这种效果可以通过以下结构实现：

// 示例代码框架
Scroll() {
  Column() {
    // 1. 顶部可滚出视口的区域，如“黄色签到”图片
    Image($r('...'))
      .height(200)

    // 2. 内层滚动列表区域
    List() {
      // 商品列表项...
    }
    .scrollBar(BarState.Off) // 通常隐藏自身滚动条，由外层控制
    .nestedScroll({
      scrollForward: NestedScrollMode.SELF_FIRST, // 关键：滚动事件子组件优先
      scrollBackward: NestedScrollMode.SELF_FIRST
    })
  }
}
.nestedScroll({
  scrollForward: NestedScrollMode.PARENT_FIRST, // 关键：向前滚动父容器优先
  scrollBackward: NestedScrollMode.PARENT_FIRST
})
.scrollBar(BarState.Auto)

2. 原理与参数解析：

  • nestedScroll：用于建立父子滚动组件之间的滚动优先级协调机制。
  • NestedScrollMode.PARENT_FIRST：设置给外层Scroll。意味着当用户开始上拉（scrollForward）时，外层Scroll会优先消费滚动事件。因此，会先滚动外层的Column内容，导致顶部的图片逐渐移出视口。
  • NestedScrollMode.SELF_FIRST：设置给内层List。当外层Scroll的内容（顶部图片）已经滚动到尽头（即完全隐藏），而用户继续上拉时，滚动事件会继续向下传递。由于List设置为SELF_FIRST，此时内层List将优先消费滚动事件，开始滚动自身的列表内容。

3. 布局与样式要点：

  • 外层Scroll的Column需要设置alignItems(HorizontalAlign.Start)，确保内容正常排列。
  • 内层List需要设置一个确定的高度（例如.layoutWeight(1)或固定高度），以确保其滚动区域计算正确。
  • 动图中“慢慢消失”的效果，除了滚动位移，可能还结合了顶部图片的透明度或缩放动画，这可以通过监听外层Scroll的onScroll或onScrollFrameBegin事件，根据滚动偏移量动态计算并应用属性动画来实现。

这种模式清晰地区分了滚动阶段，完美复现了“先滚动外层Banner，再滚动内层列表”的交互体验，是HarmonyOS Next处理复杂嵌套滚动场景的推荐方式。

回到顶部