评论

Skyline|长列表也可以丝滑~

使用小程序 scroll-view 即可实现丝滑长列表

对于长列表出现的白屏、卡顿、界面跳动等问题,小程序提供了新 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 吸顶效果、网格布局、瀑布流布局等能力便于开发者接入使用~


最后一次编辑于  2023-08-03  
点赞 8
收藏
评论

14 个评论

  • 🍪
    🍪
    02-28

    https://developers.weixin.qq.com/s/Y5Y8rrm37qEY

    代码片段scroll-view无法滑动?

    02-28
    赞同 3
    回复
  • 道一
    道一
    03-29

    代码片段为什么滚动不了呢

    03-29
    赞同 2
    回复
  • starboy
    starboy
    07-04

    你好。使用了 reverse 之后。接收新消息,需要插入在消息数组的最前面,不也会导致页面抖动吗

    07-04
    赞同 1
    回复
  • 旧梦@
    旧梦@
    03-21
    <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

    03-21
    赞同 1
    回复 2
    • starboy
      starboy
      07-04
      你好。使用了 reverse 来实现聊天界面。可以解决上拉解决历史聊天记录页面抖动问题。但是每当发送新消息时(或者接受新消息),需要将新消息unshift到消息数组头部,页面又会抖动了。请问怎么解决呢
      07-04
      回复
    • 亦心
      亦心
      09-14回复starboy
      无解,reverse 本来就不是一种完美的解决方案
      09-14
      回复
  • 咖喱给给
    咖喱给给
    2022-12-17


      "lazyCodeLoading": "requiredComponents",
      "renderer": "skyline"
    设置了这个,所有的页面导航栏全部成自定义了?
    
    2022-12-17
    赞同 1
    回复 2
  • 叁贰叁叁
    叁贰叁叁
    06-26

    代码片段都执行不了

    06-26
    赞同
    回复
  • 从君华
    从君华
    2023-09-18

    看看这个。

    scroll-into-view 异常? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/000c801a278400a3ca10f11946b000

    2023-09-18
    赞同
    回复
  • 滿心
    滿心
    2023-06-12

    . webview 的 scroll-view 反转后 手指滚动方向与列表滚动方向相反 这个问题有解决方案吗

    2023-06-12
    赞同
    回复 1
    • 滿心
      滿心
      2023-06-12
      不然我们这个 也没办法做兼容啊
      2023-06-12
      回复
  • 微信小店技术专员-binnie
    微信小店技术专员-binnie
    2022-12-26

    小程序吸顶、网格、瀑布流布局都拿下~https://developers.weixin.qq.com/community/develop/article/doc/000a088c5c471062bf0f0af1a5b813

    2022-12-26
    赞同
    回复 1
  • Justin
    Justin
    2022-12-22

    能不能别变成自定义导航啊,这样改起来太麻烦了,然后IOS支持?

    2022-12-22
    赞同
    回复 2
    • 黄思程
      黄思程
      2022-12-24
      iOS 支持,导航套个自定义组件应该很容易满足,可以逐个页面开启,不一定全局开
      2022-12-24
      回复
    • Justin
      Justin
      2022-12-24回复黄思程
      后续会调整吗 还是说这个skyline 以后就是这样了
      2022-12-24
      回复

正在加载...

登录 后发表内容