未分類
4 11 月 2020

vue.js 里刚开始数据请求延迟的话会短暂显示那个没数据的画面咋搞哦

vue.js 里刚开始数据请求延迟的话会短暂显示那个没数据的画面咋搞哦

資深大佬 : qwertyzzz 3

有数据
大佬有話說 (34)

  • 資深大佬 : emeab

    加 loading

  • 主 資深大佬 : qwertyzzz

    @emeab 获取的时候先加 loading 吗

  • 資深大佬 : imherer

    对的，按 1L 说的加 loading 不就好了

    而且这种操作本来就应该加 loading，万一你获取数据花费时间较长怎么办？ loading 是良策

  • 資深大佬 : vivipure

    loading, 骨架屏，v-cloak

  • 主 資深大佬 : qwertyzzz

    好的好的 谢谢各位大佬

  • 資深大佬 : LyleRockkk

    告诉用户当前正在加载数据就好了，可先显示默认无数据状态图片或者加 loading 告知正在加载

  • 資深大佬 : zaul

    不会百度？

  • 資深大佬 : RickyC

    让显示数据的那里 display:none;

    得到数据后, 在回调里去掉 display:none; 这个属性

  • 資深大佬 : RickyC

    @zaul 我问一下, 论坛的作用是什么? 看新闻?

  • 資深大佬 : 1277840534

    如果不考虑布局结构突然变化的话也可以用用 v-if

  • 資深大佬 : TimPeake

    这个跟 Vue 没啥关系吧 换个框架你也会这么问

  • 資深大佬 : msaionyc

    @RickyC 真的忍不了，最近 v2 好多这种人，太恶心了

  • 資深大佬 : AreYou0k

    beforeCreate

  • 資深大佬 : ragnaroks

    <loading v-if=”isLoading” />
    <data-panel v-else />

  • 資深大佬 : BluesQu

    v-cloak

  • 資深大佬 : zhuangzhuang1988

    https://github.com/posva/vue-promised/blob/master/src/index.js
    看下源码
    组合出 3 个状态就好了

  • 主 資深大佬 : qwertyzzz

    @zaul 不是不会百度 只是不知道搜索的关键词 这种问题估计没一种约定俗成的叫法 问之前有搜过的

  • 資深大佬 : NBUG

    这问题无关框架啊

  • 資深大佬 : JayLin1011

    [email protected] 的方案：
    1. 动态组件；
    2. 条件渲染；
    3. 异步组件；
    [email protected] 的方案：suspense 。
    具体情况可根据具体需求灵活选择。

  • 資深大佬 : assassin1993zj

    @zaul 百度 NMLGCB，人家问个问题不想回答就别回答，非要秀下你会百度？那为啥不 Google 呢？低能儿

  • 資深大佬 : chaselen

    <empty v-if=”list && !list.length” />
    <data v-if=”list && list.length” />

    data { list: null }

  • 資深大佬 : tinydancer

    大家理性讨论，不然主反手就是一个 doom

  • 資深大佬 : 353943780

    自己要设置 requestStatus 记录请求前中后的状态，不同的状态，显示不一样的 ui dom 。

    直接判断 list 为空也不合适，有可能数据真的为空，就要显示数据空状态的 ui 。

  • 資深大佬 : cszchen

    @RickyC 用 v-if 可能比操作 dom 修改 css 更合适

  • 資深大佬 : cszchen

    看用的框架有没有骨架，没有的话用 loading

  • 資深大佬 : CODEWEA

    placeholder

  • 資深大佬 : npe

    骨架屏

  • 資深大佬 : RickyC

    @cszchen 我一直 vue 和 jQuery 配合使用, dom 操作还是很常用的, 对我来说

  • 資深大佬 : zzzzzzggggggg

    loading

  • 資深大佬 : qxqsxbd

    因为你少个数据获取中的状态，类比 Promise 的三个状态 Pending （获取中）、Resolve （有数据）和 Reject （没数据）

  • 資深大佬 : redbuck

    LS 加一

    你需要增加一个状态

  • 資深大佬 : ljpCN

    区分一下初始状态(尚未 fetch)和空状态(fetch 的结果为空)，初始状态显示一个尚未获取或者显示 loading，空状态显示未获取到数据的提示。

  • 資深大佬 : azh7138m

    @RickyC

    vue 官方文档有写怎么处理这个问题
    vue 官方文档有中文

    互相讨论低质量问题只会是浪费时间

  • 資深大佬 : chnyuwen

    RTFM