列表嵌套，用对组件更高效
微信开发者
发布于:2023-12-18
文章内容来源于公众号：微信开发者，点此可查看原文，内容版权归相关企业所有，本网站仅供交流学习。若涉及版权问题或存在侵权情况，请及时与我们联系，我们将第一时间进行删除处理。
摘要：丝滑滚动小程序多个列表，scroll-view 新属性轻松实现！
随着业务的快速发展，小程序承载越来越丰富的功能，页面结构也变得更复杂。不少产品需要多个列表切换的操作来实现无需跳转的丝滑用户体验。
然而原有的 scroll-view 组件无法完美支持多列表嵌套滚动，导致切换过程出现卡顿等情况。为了优化多个列表嵌套滚动的性能表现，自基础库 3.2.0 起，Skyline 渲染引擎的 scroll-view 组件支持 type="nested" 属性，支持开发者轻松实现父子 scroll-view 间的嵌套滚动。
接入 nested 仅需 2 步即可快速实现：
最外层使用 <scroll-view type="nested"></scroll-view>
内部直接使用 nested-* 组件
<!-- 最外层，需要设置 type="nested" --><scroll-view type="nested" scroll-y> <nested-scroll-header> <view class="top-image-cnt"> <view class="user-name">Binnie技术小课堂</view> ... </view> </nested-scroll-header> <nested-scroll-header>...</nested-scroll-header> <nested-scroll-header>...</nested-scroll-header> <nested-scroll-body> <view class="swiper-cnt"> <swiper class="swiper"> <swiper-item class="swiper-item"> <scroll-view type="list"> 内部 scroll-view 1 </scroll-view> </swiper-item> <swiper-item class="swiper-item"> <scroll-view type="list"> 内部 scroll-view 2 </scroll-view> </swiper-item> </swiper> </view> </nested-scroll-body></scroll-view>
除此以外，产品设计同学希望用户进入页面不只是看到单调的列表结构，也希望添加封面图直观展示产品特点，丰富页面结构，满足个人中心页、产品介绍页等常见场景。
现在 scroll-view 组件 支持结合 worklet 特性，满足更复杂的页面设计需求，同步实现以下贴近原生的交互效果：
下拉封面图，放大呈现图片内容，避免出现下拉过程出现图片上方空白的情况
下拉至列表位置，列表栏自动吸顶，方便用户自由切换其他列表；上滑超过列表栏则恢复原有的页面结构
看似复杂的页面逻辑，通过 scroll-view 与 worklet 即可轻松解决：
在 scroll-view 组件内嵌入两个 view 组件，第一个 view 组件用于展示封面图部分，第二个 view 组件则用于展示列表部分
监听 scroll-view 滚动事件，判定当前滚动位置
对于需要滚动时改变的参数（例如下拉过程需要被隐藏的封面图），使用 applyAnimatedStyle 进行绑定
编写 onScroll 事件，根据滚动方向分别处理上滑和下拉的情况，修改共享变量（例如修改封面图大小）
<!-- 通过 initNavOpacity 设置是否显示 --><navigation-bar id="nav" style="opacity: {{initNavOpacity}};" title="微信官方课程"></navigation-bar>
<!-- 监听 onScroll 来判断当前滚动位置来处理 --><scroll-view type="list" scroll-y worklet:onscrollupdate="onScroll">
<view style="height: {{initImageHeight}}px;"> <image id="top-image" style="height: {{initImageHeight}}px;" src="{{topImage}}" mode="aspectFill"></image> <view class="top-content">头部文字内容</view> </view> <view wx:for="{{list}}"></view> </scroll-view>
onLoad() { this.imageHeight = shared(initImageHeight) this.applyAnimatedStyle('#top-image', () => { 'worklet' return { height: `${this.imageHeight.value}px`, } })
this.navOpacity = shared(initNavOpacity) this.applyAnimatedStyle('#nav', () => { 'worklet' return { opacity: this.navOpacity.value, } })
this.navHeight = shared(0) wx.createSelectorQuery().select('#nav').boundingClientRect(res => { this.navHeight.value = res.height }).exec()},
onScroll(evt) { 'worklet' const scrollTop = evt.detail.scrollTop
if (scrollTop >= 0) { this.imageHeight.value = initImageHeight const navHeight = this.navHeight.value const limit = initImageHeight - navHeight this.navOpacity.value = Math.min(Math.min(scrollTop, limit) / limit, 1) } else { this.imageHeight.value = initImageHeight - scrollTop this.navOpacity.value = 0 }}
通过 scroll-view 组件 的灵活应用，开发者仅需几步即可快速实现完整的多列表页面结构，不仅满足产品设计的视觉需求，还实现贴近原生的丝滑切换效果。除此以外，Donut 多端框架 已支持接入 Skyline 渲染引擎，实现更流畅的多端交互体验，欢迎各位开发者接入！
如有 Skyline 渲染引擎相关问题，可在 Skyline 社区专区 发帖互动，技术专员将为大家解答及进行深度交流。
