评论

复杂瀑布流长列表页踩坑记录,内存不足问题【1】

这篇文章主要是解决小程序无限滚动瀑布流页面引起的ios内存不足,自动退出问题

这篇文章主要是解决小程序无限滚动瀑布流页面引起的ios内存不足,自动退出问题

问题回顾:我们有一个列表展示页,是无限瀑布流式的,展示的元素我们封装成了单个组件,暂且叫它Item组件。这个瀑布流包含若干个Item组件,并且这个Item组件也比较复杂,包含各种展示样式(根据不同类型,大概有9种吧,反正渲染节点很多),在进行滑动的过程中,item大概加载30-40个以后,就会造成小程序内存不足而退出,蓝瘦香菇…
点击此处查看二期

解决思路:

将超出屏幕一定部分的列表内的组件进行不渲染的处理(也就是用wx:if卸载掉组件),当到达渲染临界点时再开始渲染;保证每次少量的数据展示。

我们的项目中是保持15条Item,我们是每次分页请求5条,按照前5条,中间5条和后5条来划分,如果不在这个范围,则用一个等高度的骨架代替,并且卸载这些组件

实现方式

使用曝光监听,当一个Item曝光时,记录Item高度,并放到数组里面,作为骨架的填充高度,如果已经记录了高度,则不再重复记录;曝光时向外传递一个当前渲染范围的中心值(比如当前Item所属页码,或者当前Item索引),以此进行处理;

这里有一点要注意,如果你的列表item组件比较复杂,需要在ready的时候将记录的高度设置为item最小高度,不然组件重新装载时会有一定的渲染时间,在临界点会造成跳屏【此处已经通过骨架组件解决,可以忽略,只是作为踩坑记录】

此时优化点
  • 为避免频繁setData和渲染,做了防抖函数,时间是600ms
此时缺点
  • 滑动特别快时,会出现白屏,是因为曝光监听是在组件里面,而超快速滚动时,组件没有装载进来,也无法进行曝光监听,所以无法触发,这里考虑用骨架组件进行二次监听曝光
优化迭代
  • 将骨架组件作为外壳套在Item外面(用slot),并对骨架进行监听曝光,可以解决上面缺点
  • 给骨架组件做一个常规骨架屏样式,而不是纯白色,看起来更优雅
最后,还是尽量减少节点数,优化代码
最后一次编辑于  2019-12-05  
点赞 5
收藏
评论

3 个评论

  • 兵
    2020-05-07

    这个还是不能解决白屏问题,看来得用长列表了

    2020-05-07
    赞同
    回复
  • 九千七
    九千七
    2019-10-08

    能给个代码片段参考下吗,也碰到这个问题困扰很久了

    2019-10-08
    赞同
    回复 1
    • 宗仔GEG
      宗仔GEG
      2019-12-05
      代码片段已给,最近终于有空整理了,二期里面有
      2019-12-05
      回复
  • 沉冰
    沉冰
    2019-09-09

    官方拓展能力有一个长列表

    https://developers.weixin.qq.com/miniprogram/dev/extended/functional/recycle-view.html

    2019-09-09
    赞同
    回复 8
    • 宗仔GEG
      宗仔GEG
      2019-09-09
      我那个高度是不固定的额
      2019-09-09
      回复
    • 沉冰
      沉冰
      2019-09-09回复宗仔GEG

      高度,一般是用wx.getSystemInfoSync()获取系统高度然后计算,

      还有,如果写教程文章之类的,最好是能配一个代码片段

      2019-09-09
      回复
    • 宗仔GEG
      宗仔GEG
      2019-09-09回复沉冰
      我是说item高度哇,我的item高度不固定,官方的createRecycleContext需要固定高度~后面我会补一个代码片段~
      2019-09-09
      回复
    • 宗仔GEG
      宗仔GEG
      2019-09-09回复沉冰
      而且实现方式已经说得比较清楚了~不是很难的思路
      2019-09-09
      回复
    • Beus Liu
      Beus Liu
      2019-09-09
      我用的方式是对列表使用双重数组setData,list[itemList1[],itemList2[],itemList3[]],setData只操作itemList即可,实际使用下来效果还不错
      2019-09-09
      回复
    查看更多(3)
登录 后发表内容