列表嵌套，用对组件更高效-绍兴网站建设为你呈现

随着业务的快速发展，小程序承载越来越丰富的功能，页面结构也变得更复杂。不少产品需要多个列表切换的操作来实现无需跳转的丝滑用户体验。

然而原有的 scroll-view 组件无法完美支持多列表嵌套滚动，导致切换过程出现卡顿等情况。为了优化多个列表嵌套滚动的性能表现，自基础库 3.2.0 起，Skyline 渲染引擎的 scroll-view 组件支持 type="nested" 属性，支持开发者轻松实现父子 scroll-view 间的嵌套滚动。

接入 nested 仅需 2 步即可快速实现：

1. 最外层使用 <scroll-view type="nested"></scroll-view>

2. 内部直接使用 nested-* 组件

• nested-scroll-header：属于外层 scroll-view 的节点

• nested-scroll-body：属于里层 scroll-view 的节点

  
  

除此以外，产品设计同学希望用户进入页面不只是看到单调的列表结构，也希望添加封面图直观展示产品特点，丰富页面结构，满足个人中心页、产品介绍页等常见场景。

现在 scroll-view 组件 支持结合 worklet 特性，满足更复杂的页面设计需求，同步实现以下贴近原生的交互效果：

1. 下拉封面图，放大呈现图片内容，避免出现下拉过程出现图片上方空白的情况

2. 下拉至列表位置，列表栏自动吸顶，方便用户自由切换其他列表；上滑超过列表栏则恢复原有的页面结构

看似复杂的页面逻辑，通过 scroll-view 与 worklet 即可轻松解决：

1. 在 scroll-view 组件内嵌入两个 view 组件，第一个 view 组件用于展示封面图部分，第二个 view 组件则用于展示列表部分

2. 监听 scroll-view 滚动事件，判定当前滚动位置

3. 对于需要滚动时改变的参数（例如下拉过程需要被隐藏的封面图），使用 applyAnimatedStyle 进行绑定

4. 编写 onScroll 事件，根据滚动方向分别处理上滑和下拉的情况，修改共享变量（例如修改封面图大小）

   
   

# Skyline小程序渲染引擎16