文章目录前言嵌套滚动的坑滚动嵌套冲突分析Scroll 嵌套 List 的正确写法NestedScroll 属性详解自定义嵌套滚动踩坑记录写在最后前言搞了半天嵌套滚动手指一划——要么外层 Scroll 疯狂滚动内层 List 一动不动要么两个一起滚然后卡死。说实话嵌套滚动这玩意儿没搞懂nestedScroll之前就是玄学。今天把 Scroll 嵌套 List 的正确姿势整理一下踩过的坑也一并分享。做商品详情页、个人中心这类页面几乎都会碰到一个结构外层整体可滚动内部又有个列表区域也要滚动。这种滚动套滚动的场景天然就有冲突——你的手指在 List 上划系统该把滚动事件给谁Android 那边处理嵌套滚动要搞NestedScrollingParent/Child一套接口HarmonyOS7 就简单多了一个属性搞定。但前提是——你得搞懂那几个枚举值到底是啥意思。嵌套滚动的坑先看看不处理嵌套滚动是啥效果EntryComponentstruct BadNestScroll{build(){Scroll(){Column(){Text(顶部Banner区域).width(100%).height(200).backgroundColor(#ffdddd).textAlign(TextAlign.Center)List(){ForEach([1,2,3,4,5,6,7,8],(item:number){ListItem(){Text(列表项${item}).width(100%).height(80).textAlign(TextAlign.Center)}})}.width(100%).height(400)}}.width(100%).height(100%)}}跑起来你会发现手指在 List 区域滑动只有 List 在滚顶部的 Banner 纹丝不动。想先滚 Banner 再滚 List做不到。滚动嵌套冲突分析说白了嵌套滚动的核心问题就一个滚动事件的分发顺序。当手指在 List 上滑动时系统面临选择把事件给 List → List 先滚外层 Scroll 不动把事件给 Scroll → Scroll 先滚List 不动两个都给 → 双层同时滚体验很诡异不同场景要的效果不一样。商品详情页要的是先滚外层把 Banner 滚走再滚内层浏览列表——这叫外层优先。Scroll 嵌套 List 的正确写法上代码EntryComponentstruct GoodNestScroll{build(){Scroll(){Column(){Text(顶部Banner区域).width(100%).height(200).backgroundColor(#ffdddd).textAlign(TextAlign.Center)List(){ForEach([1,2,3,4,5,6,7,8],(item:number){ListItem(){Text(列表项${item}).width(100%).height(80).textAlign(TextAlign.Center)}})}.width(100%).height(400).nestedScroll({scrollForward:NestedScrollMode.PARENT_FIRST,scrollBackward:NestedScrollMode.SELF_FIRST})}}.width(100%).height(100%)}}关键代码讲解.nestedScroll()—— 这是 List 组件上的属性告诉系统我嵌套在 Scroll 里了滚动事件该怎么分scrollForward: NestedScrollMode.PARENT_FIRST——往下滑时向末尾方向先让外层 Scroll 滚。这样 Banner 会先滚走等 Scroll 滚不动了List 才开始滚scrollBackward: NestedScrollMode.SELF_FIRST——往上滑时向起始方向先让 List 自己滚。用户回看列表项时不会突然跳到顶部划重点nestedScroll是设在子滚动组件上的不是外层 Scroll 上NestedScroll 属性详解nestedScroll接收NestedScrollOptions对象两个方向各自配置参数含义scrollForward往末尾端滚动时的模式下滑scrollBackward往起始端滚动时的模式上滑每个方向可选的NestedScrollMode枚举枚举值说明典型场景SELF_ONLY只自己滚不跟父组件联动不想联动的时候SELF_FIRST自己先滚滚到边缘后父组件滚回滚时先看列表PARENT_FIRST父组件先滚滚到边缘后自己滚下滑时先看 BannerPARALLEL自己和父组件同时滚特殊联动效果最常见的组合就是scrollForward: PARENT_FIRST // 下滑先滚外层 scrollBackward: SELF_FIRST // 上滑先滚内层这也是评论区吸顶、商品详情页的标准配置。自定义嵌套滚动更复杂的场景怎么办比如我要实现评论区吸顶——List 到顶部后粘住再往下滑只滚 List不滚 Banner。EntryComponentstruct StickyNestScroll{privatescroller:ScrollernewScroller()StatelistHeight:number500build(){Scroll(this.scroller){Column(){Text(文章内容区域).width(100%).height(300).backgroundColor(#ddeeff).textAlign(TextAlign.Center)Text(评论区).width(100%).height(48).backgroundColor(#eeeeee).textAlign(TextAlign.Center).fontWeight(FontWeight.Bold)List(){ForEach([1,2,3,4,5,6,7,8,9,10],(item:number){ListItem(){Row(){Text(用户${item}:).fontWeight(FontWeight.Bold).fontSize(14)Text(这是一条评论内容...).fontSize(14).margin({left:8})}.width(100%).padding(16)}})}.width(100%).height(this.listHeight).edgeEffect(EdgeEffect.None).nestedScroll({scrollForward:NestedScrollMode.PARENT_FIRST,scrollBackward:NestedScrollMode.SELF_FIRST})}}.width(100%).height(100%).edgeEffect(EdgeEffect.Spring)}}关键代码讲解Scroll(this.scroller)—— 传入 Scroller 控制器后面可以通过代码控制外层滚动List.edgeEffect(EdgeEffect.None)——关掉 List 的边缘效果滚到头不会有弹性回弹体验更干净Scroll.edgeEffect(EdgeEffect.Spring)—— 外层用弹性效果手感更好如果想让吸顶更刚可以监听 Scroll 的onDidScroll回调动态调整 List 的高度。踩坑记录坑 1nestedScroll 设反了方向scrollForward是往末尾方向不是向下。如果你的布局是反的比如某些 RTL 场景Forward 和 Backward 的含义会变。跑起来不对先检查方向。坑 2List 高度不设或设成 100%List 嵌套在 Scroll 里时必须给 List 一个固定高度不然它会把所有内容撑开失去滚动能力。设成height(100%)也不行——那等于占满 Scroll嵌套就没意义了。坑 3两个方向的 nestedScroll 设成一样有些人图省事Forward 和 Backward 都设PARENT_FIRST。结果是往上滑也先滚外层用户回看列表时体验极差。两个方向要根据交互需求分别设。坑 4Scroller 控制自己在onDidScroll里用 Scroller 控制自己所在的组件滚动会导致索引错乱或者无限循环。控制别的组件可以控制自己不行。写在最后嵌套滚动这事儿核心就两步给子滚动组件加.nestedScroll()Forward 用PARENT_FIRSTBackward 用SELF_FIRST90% 的场景这招就够用了。剩下 10% 的复杂交互再配合 Scroller 和onDidScroll手动控制。别怕嵌套滚动也别硬写手动滚动逻辑——nestedScroll就是专门干这事的。