vue.js 里刚开始数据请求延迟的话会短暂显示那个没数据的画面咋搞哦
qwertyzzz · 123 · 2020-11-18 08:54:33 +08:00 · 3960 次点击这是一个创建于 1500 天前的主题，其中的信息可能已经有所发展或是发生改变。
有数据
无数据
data{ list:[] }
list 是异步获取的实际有数据的 如何解决刚开始会短暂显示无数据呀
 |
1
2kCS5c0b0ITXE5k2 2020-11-18 08:55:38 +08:00
加 loading
|
 |
3
imherer 2020-11-18 09:00:44 +08:00
对的，按 1L 说的加 loading 不就好了
而且这种操作本来就应该加 loading，万一你获取数据花费时间较长怎么办？ loading 是良策 |
 |
4
vivipure 2020-11-18 09:04:53 +08:00
loading, 骨架屏，v-cloak
|
 |
5
qwertyzzz OP 好的好的 谢谢各位大佬
|
 |
6
LyleRockkk 2020-11-18 09:08:29 +08:00
告诉用户当前正在加载数据就好了，可先显示默认无数据状态图片或者加 loading 告知正在加载
|
 |
7
RickyC 2020-11-18 09:16:25 +08:00
让显示数据的那里 display:none;
得到数据后, 在回调里去掉 display:none; 这个属性 |
 |
8
1277840534 2020-11-18 09:17:01 +08:00
如果不考虑布局结构突然变化的话也可以用用 v-if
|
 |
9
TimPeake 2020-11-18 09:19:05 +08:00
这个跟 Vue 没啥关系吧 换个框架你也会这么问
|
 |
10
AreYou0k 2020-11-18 09:22:15 +08:00
beforeCreate
|
 |
11
ragnaroks 2020-11-18 09:22:42 +08:00  1
<loading v-if="isLoading" />
<data-panel v-else /> |
 |
12
BluesQu 2020-11-18 09:23:55 +08:00 1
v-cloak
|
 |
13
zhuangzhuang1988 2020-11-18 09:31:02 +08:00
|
 |
14
NBUG 2020-11-18 10:04:00 +08:00
这问题无关框架啊
|
 |
15
JayLin1011 2020-11-18 10:16:06 +08:00
vue@2 的方案：
1. 动态组件； 2. 条件渲染； 3. 异步组件； vue@3 的方案：suspense 。 具体情况可根据具体需求灵活选择。 |
 |
16
chaselen 2020-11-18 11:29:04 +08:00
<empty v-if="list && !list.length" />
<data v-if="list && list.length" /> data { list: null } |
 |
17
353943780 2020-11-18 11:42:40 +08:00
自己要设置 requestStatus 记录请求前中后的状态，不同的状态，显示不一样的 ui dom 。
直接判断 list 为空也不合适，有可能数据真的为空，就要显示数据空状态的 ui 。 |
 |
19
cszchen 2020-11-18 11:57:51 +08:00
看用的框架有没有骨架，没有的话用 loading
|
 |
20
CODEWEA 2020-11-18 12:10:27 +08:00
placeholder
|
 |
21
npe 2020-11-18 12:37:34 +08:00 1
骨架屏
|
 |
23
qxqsxbd 2020-11-18 15:42:36 +08:00
因为你少个数据获取中的状态，类比 Promise 的三个状态 Pending （获取中）、Resolve （有数据）和 Reject （没数据）
|
 |
24
redbuck 2020-11-18 16:43:01 +08:00
LS 加一
你需要增加一个状态 |
 |
25
ljpCN 2020-11-18 18:10:32 +08:00 via Android
区分一下初始状态(尚未 fetch)和空状态(fetch 的结果为空)，初始状态显示一个尚未获取或者显示 loading，空状态显示未获取到数据的提示。
|
Select Language