对于长列表出现的白屏、卡顿、界面跳动等问题,小程序提供了新 scroll-view 来解决这一系列问题。我们先来看看效果~
快速滚动效果对比
我们通过一组长列表来展示新旧 scroll-view 在快速滚动下的效果对比。
当长列表快速滚动时,旧 scroll-view 容易出现白屏的情况,新 scroll-view 则不会出现白屏。
左:旧 scroll-view、右:新 scroll-view
在安卓机器快速滚动过程中,旧 scroll-view 反应卡顿,容易出现手指离开操作时,滚动动画还在进行。
而新 scroll-view 则可以保持界面滚动效果跟随手指,停止滚动则缓慢结束动画效果。
左:旧 scroll-view、右:新 scroll-view ,测试机型:Xiaomi MIX 3
反向滚动效果对比
在对话等场景下,反向滚动是常见的功能,旧 scroll-view 并没有提供反向滚动的能力,我们来看看旧 scroll-view 下是怎么完成反向滚动的~
在对话数据在加载的时候,对话列表需要在更新完列表数据之后,再使用 scroll-into-view 或者 scroll-top 来保持当前滚动位置,因为设置滚动位置会有延迟,所以容易出现 界面跳动 的情况。
// .js
// scroll-view 滚动到顶部时触发
bindscrolltoupper() {
// 先更新列表数据
this.setData({
recycleList: getnewList()
}, () => {
// 更新完数据后再设置滚动位置
this.setData({
scrollintoview: scrollintoview
})
})
}
为了解决界面跳动的问题,社区上也有通过翻转的方法来解决,将 scroll-view 与 scroll-view 的子元素进行翻转。
// .wxss
.reserve {
transform: rotateX(180deg);
}
// .wxml
然而进行翻转之后,会遇到手指滚动方向与列表滚动方向相反、scroll-into-view 属性无效等问题。
为了帮开发者们解决反向滚动类列表的一系列问题,新 scroll-view 直接提供了 reverse 属性支持反向滚动的能力,滚动效果更加顺滑。
左:旧 scroll-view、右:新 scroll-view(图片加载期间,GIF 渲染较慢)
怎么接入新 scroll-view ?
新的 scroll-view 使用起来很简单,主要有以下两个步骤:
- 修改小程序配置
- scroll-view 增加 type="list"
// app.json
// "renderer": "skyline" 开启之后所有页面会变成自定义导航,可参考 https://developers.weixin.qq.com/s/Y5Y8rrm37qEY 实现自定义导航
// 也可在 page.json 中配置 "renderer": "skyline" 逐个页面开启
{
...
"lazyCodeLoading": "requiredComponents",
"renderer": "skyline"
}
// page.json
{
...
"disableScroll": true,
"navigationStyle": "custom"
}
// page.wxml
...
// 反向滚动
新的 scroll-view 从安卓 8.0.28 / iOS 8.0.30 开始支持,如需兼容低版本需要进行兼容处理。
wx.getSkylineInfo({
success(res) {
if (res.isSupported) {
// 使用新版 scroll-view
} else {
// 使用旧版 scroll-view
}
}
})
如需体验长列表效果,可在微信开发者工具导入该代码片段即可体验:https://developers.weixin.qq.com/s/Y5Y8rrm37qEY
怎么做到的?
大家肯定好奇为什么新 scroll-view 可以解决这个头疼的问题呢?
我们来对比一下新旧 scroll-view 有什么区别就可以知道答案啦~
旧 scroll-view
- 逻辑层与渲染层的通信需要通过 JSBridge 进行转换,需要一定的时间开销
- 渲染采用异步分块光栅化,当渲染赶不上滚动的速度,来不及渲染则会出现白屏
- 渲染大量节点内存占用高,需要开发者自行优化只渲染在屏节点,开发成本高
新 scroll-view
- 逻辑层与渲染层的通信无需通过 JSBridge 进行转换,减少了大量通信时间开销
- 渲染采用同步光栅化,滚动与渲染在同一线程,不会出现白屏
- 针对长列表进行优化,只渲染在屏节点,内存占用低,减少了一些渲染耗时,且开发接入成本低
除此之外,新 scroll-view 后续将提供 type="custom" 支持 sticky 吸顶效果、网格布局、瀑布流布局等能力便于开发者接入使用~
https://developers.weixin.qq.com/s/Y5Y8rrm37qEY
代码片段scroll-view无法滑动?
代码片段为什么滚动不了呢
你好。使用了 reverse 之后。接收新消息,需要插入在消息数组的最前面,不也会导致页面抖动吗
<scroll-view class="scroll-box" type="list" reverse bindscrolltolower="bindscrolltouppernew"> <view wx:for="{{recycleList}}" id="id-{{item.idx}}"> <view class="box"> <view class="content"> <text>scroll-view 可以反向滚动嘛?</text> </view> </view> </view> </scroll-view>
如需体验长列表效果,可在微信开发者工具导入该代码片段即可体验:https://developers.weixin.qq.com/s/Y5Y8rrm37qEY
【问题】示例代码里的 scroll-view使用reverse时完全没有效果,无法滚动
【版本】[skyline] skyline 版本号: 1.1.4, 版本记录: 12673fb8974a63cba045e6c758955679accbf57a
"lazyCodeLoading": "requiredComponents", "renderer": "skyline" 设置了这个,所有的页面导航栏全部成自定义了?
https://developers.weixin.qq.com/s/Y5Y8rrm37qEY
代码片段都执行不了
看看这个。
scroll-into-view 异常? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/000c801a278400a3ca10f11946b000
. webview 的 scroll-view 反转后 手指滚动方向与列表滚动方向相反 这个问题有解决方案吗
小程序吸顶、网格、瀑布流布局都拿下~https://developers.weixin.qq.com/community/develop/article/doc/000a088c5c471062bf0f0af1a5b813
能不能别变成自定义导航啊,这样改起来太麻烦了,然后IOS支持?