weex列表渲染慢的问题

我的页面代码结构是这样的:

<template>
    <div>
        <tab></tab>
        <scroller>
            <div v-for="item in list">
                <item :val="item"></item>
            </div>
        </scroller>
    </div>
</template>

那么我在点击了tab之后,通过对this.list赋值改变列表。
但事实上发现切换时会有一瞬间的闪。
通过手机的视频录制,发现会有大概一帧的瞬间是列表会有旧的值。
比如
原本list=[1,2,3],那么渲染出来的是:

  • 1
  • 2
  • 3

然后我把list=[4,5,6](就是用的等号,不是用concat),会有一瞬间渲染出来的结果是

  • 2
  • 3
  • 4
  • 5
  • 6

然后再变成

  • 4
  • 5
  • 6

如果这时我把list=[],就会有一瞬间结果是

  • 6

再变成空。

就是列表的渲染不是在一帧内完成的,如果录制视频放慢了还会看见逐个出现,逐个消失的过程。
在web端不会有这种情况,但在iOS和Android都有。

阅读 3k
2 个回答

那就增加loading吧

新手上路,请多包涵

遇到了相同的问题,通过先把 list 中的内容清空,nextTick 之后再插入新内容,可以适当缓解

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题