我的页面代码结构是这样的:
<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都有。
那就增加loading吧