微信小程序如何实现长列表更顺畅

快速滚动效果对比

我们通过一组长列表来展示新旧 scroll-view 在快速滚动下的效果对比。当长列表快速滚动时，旧 scroll-view 容易出现白屏的情况，新 scroll-view 则不会出现白屏。

https://v.qq.com/txp/iframe/player.html?vid=o3367bq7wf8&disableplugin=IframeBottomOpenClientBar&&auto=0

在安卓机器快速滚动过程中，旧 scroll-view 反应卡顿，容易出现手指离开操作时，滚动动画还在进行。而新 scroll-view 则可以保持界面滚动效果跟随手指，停止滚动则缓慢结束动画效果。

https://v.qq.com/txp/iframe/player.html?vid=l3367lgtqxq&disableplugin=IframeBottomOpenClientBar&&auto=0

反向滚动效果对比

在对话等场景下，反向滚动是常见的功能，旧 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 属性支持反向滚动的能力，滚动效果更加顺畅。

https://v.qq.com/txp/iframe/player.html?vid=j33677x451j&disableplugin=IframeBottomOpenClientBar&&auto=0

怎么接入新 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 吸顶效果、网格布局、瀑布流布局等能力便于开发者接入使用