收藏
回答

这个问题是要沉了么?长列表渲染卡顿,安卓直接卡死,求优化解决之道!!!!

#场景:

页面是不断上拉加载的数据流,不断地加载造成页面长列表,

情况类似使用的新闻app的数据加载方式。


结构示意:



#问题:

此时进行页面渲染后,滑动页面出现卡顿现象,


ios(6s)在超过10页轻微出现延迟,

安卓直接3-4页出现卡顿,

再往后直接延迟3、4秒才响应滑动,直到页面有5、6秒的延迟就操作不动。


#当前情况:

1、setdata已做优化,避免使用concat,采用分段,先占位(分页级别),再渲染。

setdata({

list[page]:datalist

})


2、列表的dom结构不一样,有单图组合文字、3图组合文字、有单张大图


3、滑动区域没有使用scroll-view组件




不知社区内是否有类似情况,且有解的朋友。



最后一次编辑于  2019-07-17
回答关注问题邀请回答
收藏

4 个回答

  • .
    .
    2019-09-23

    https://developers.weixin.qq.com/community/develop/article/doc/000ec256ebc54061f0198cdef51813

    2019-09-23
    赞同
    回复
  • WANGZHENG
    WANGZHENG
    2019-08-19

    建议二维数组渲染

    2019-08-19
    赞同
    回复
  • WXIAN
    WXIAN
    2019-07-23

    为什么 我用 list[page]:datalist  这种方式setData 会报错

    2019-07-23
    赞同
    回复 2
    • 冰是沉默的水
      冰是沉默的水
      2019-07-23
      [`listData[1]`]:list , //强烈建议这样写,或者全部setData
      2019-07-23
      回复
    • WXIAN
      WXIAN
      2019-07-23
      发现 还真可以 谢谢啦! 这样就不用老是concat 列表数据了,渲染应该快点
      2019-07-23
      回复
  • Maosheng
    Maosheng
    2019-07-19

    相比我的,你的性能应该算是好的了吧

    我的用了scroll-view(用它的原因是因为有个下拉刷新的loading要自定义,用页面的下拉刷新的不好做,所以就自己撸了一个)

    然后一个页面内有四个scroll-view(类似与tabbar切换,为什么不用官方的tabbar,是因为点击要有自定义动作,其中三个scroll-view中有长列表,两个长列表中包含大图片)

    其中一个scroll-view最变态,最少包含两个自定义组件。


    红框中的是两个组件

    现在在想优化方案,脑壳疼

    来个大佬给个建议呗,都是触底加载的无限大列表


    2019-07-19
    赞同
    回复 1
    • 大伟
      大伟
      2019-07-21
      经测试:1、放弃scroll-view,scroll-view在长列表场景下性能不好2、使用页面滚动,测试安卓下就算刷新到50页+页没有一点性能问题
      2019-07-21
      回复
登录 后发表内容