列表嵌套，用对组件更高效
发表时间:Mon Dec 18 2023 17:36:49 GMT+0800 (中国标准时间)
gh_56fc3b00cc4f https://mmbiz.qpic.cn/sz\_mmbiz\_jpg/Hm69WQTQfWHxmC2E6kaJ9yCBQxrPxbV4w6DgRcAaAXog3mfkaUo4NGOsaOjQpmUUrLfbav6icppEaNYptVichFIQ/0?wx_fmt=jpeg
随着业务的快速发展，小程序承载越来越丰富的功能，页面结构也变得更复杂。不少产品需要多个列表切换的操作来实现无需跳转的丝滑用户体验。
然而原有的 scroll-view 组件无法完美支持多列表嵌套滚动，导致切换过程出现卡顿等情况。为了优化多个列表嵌套滚动的性能表现，自基础库 3.2.0 起，Skyline 渲染引擎的 scroll-view 组件支持 type="nested" 属性，支持开发者轻松实现父子 scroll-view 间的嵌套滚动。
接入 nested 仅需 2 步即可快速实现：
最外层使用
内部直接使用 nested-* 组件
nested-scroll-header：属于外层 scroll-view 的节点
nested-scroll-body：属于里层 scroll-view 的节点
👉 点击查看代码
<!-- 最外层，需要设置 type="nested" -->
除此以外，产品设计同学希望用户进入页面不只是看到单调的列表结构，也希望添加封面图直观展示产品特点，丰富页面结构，满足个人中心页、产品介绍页等常见场景。
现在 scroll-view 组件 支持结合 worklet 特性，满足更复杂的页面设计需求，同步实现以下贴近原生的交互效果：
下拉封面图，放大呈现图片内容，避免出现下拉过程出现图片上方空白的情况
下拉至列表位置，列表栏自动吸顶，方便用户自由切换其他列表；上滑超过列表栏则恢复原有的页面结构
看似复杂的页面逻辑，通过 scroll-view 与 worklet 即可轻松解决：
在 scroll-view 组件内嵌入两个 view 组件，第一个 view 组件用于展示封面图部分，第二个 view 组件则用于展示列表部分
监听 scroll-view 滚动事件，判定当前滚动位置
对于需要滚动时改变的参数（例如下拉过程需要被隐藏的封面图），使用 applyAnimatedStyle 进行绑定
编写 onScroll 事件，根据滚动方向分别处理上滑和下拉的情况，修改共享变量（例如修改封面图大小）
👉 点击查看代码
<!-- 通过 initNavOpacity 设置是否显示 -->
通过 scroll-view 组件 的灵活应用，开发者仅需几步即可快速实现完整的多列表页面结构，不仅满足产品设计的视觉需求，还实现贴近原生的丝滑切换效果。除此以外，Donut 多端框架 已支持接入 Skyline 渲染引擎，实现更流畅的多端交互体验，欢迎各位开发者接入！
如有 Skyline 渲染引擎相关问题，可在 Skyline 社区专区 发帖互动，技术专员将为大家解答及进行深度交流。
