V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qwertyzzz
V2EX  ›  程序员

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

  •  
  •   qwertyzzz ·
    123 · 2020-11-18 08:54:33 +08:00 · 3919 次点击
    这是一个创建于 1452 天前的主题,其中的信息可能已经有所发展或是发生改变。
    有数据
    无数据

    data{ list:[] }

    list 是异步获取的实际有数据的 如何解决刚开始会短暂显示无数据呀

    26 条回复    2020-11-18 20:45:37 +08:00
    2kCS5c0b0ITXE5k2
        1
    2kCS5c0b0ITXE5k2  
       2020-11-18 08:55:38 +08:00
    加 loading
    qwertyzzz
        2
    qwertyzzz  
    OP
       2020-11-18 08:56:50 +08:00
    @emeab 获取的时候先加 loading 吗
    imherer
        3
    imherer  
       2020-11-18 09:00:44 +08:00
    对的,按 1L 说的加 loading 不就好了

    而且这种操作本来就应该加 loading,万一你获取数据花费时间较长怎么办? loading 是良策
    vivipure
        4
    vivipure  
       2020-11-18 09:04:53 +08:00
    loading, 骨架屏,v-cloak
    qwertyzzz
        5
    qwertyzzz  
    OP
       2020-11-18 09:07:56 +08:00
    好的好的 谢谢各位大佬
    LyleRockkk
        6
    LyleRockkk  
       2020-11-18 09:08:29 +08:00
    告诉用户当前正在加载数据就好了,可先显示默认无数据状态图片或者加 loading 告知正在加载
    RickyC
        7
    RickyC  
       2020-11-18 09:16:25 +08:00
    让显示数据的那里 display:none;

    得到数据后, 在回调里去掉 display:none; 这个属性
    1277840534
        8
    1277840534  
       2020-11-18 09:17:01 +08:00
    如果不考虑布局结构突然变化的话也可以用用 v-if
    TimPeake
        9
    TimPeake  
       2020-11-18 09:19:05 +08:00
    这个跟 Vue 没啥关系吧 换个框架你也会这么问
    AreYou0k
        10
    AreYou0k  
       2020-11-18 09:22:15 +08:00
    beforeCreate
    ragnaroks
        11
    ragnaroks  
       2020-11-18 09:22:42 +08:00   ❤️ 1
    <loading v-if="isLoading" />
    <data-panel v-else />
    BluesQu
        12
    BluesQu  
       2020-11-18 09:23:55 +08:00   ❤️ 1
    v-cloak
    zhuangzhuang1988
        13
    zhuangzhuang1988  
       2020-11-18 09:31:02 +08:00
    https://github.com/posva/vue-promised/blob/master/src/index.js
    看下源码
    组合出 3 个状态就好了
    NBUG
        14
    NBUG  
       2020-11-18 10:04:00 +08:00
    这问题无关框架啊
    JayLin1011
        15
    JayLin1011  
       2020-11-18 10:16:06 +08:00
    vue@2 的方案:
    1. 动态组件;
    2. 条件渲染;
    3. 异步组件;
    vue@3 的方案:suspense 。
    具体情况可根据具体需求灵活选择。
    chaselen
        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 }
    353943780
        17
    353943780  
       2020-11-18 11:42:40 +08:00
    自己要设置 requestStatus 记录请求前中后的状态,不同的状态,显示不一样的 ui dom 。

    直接判断 list 为空也不合适,有可能数据真的为空,就要显示数据空状态的 ui 。
    cszchen
        18
    cszchen  
       2020-11-18 11:56:53 +08:00
    @RickyC 用 v-if 可能比操作 dom 修改 css 更合适
    cszchen
        19
    cszchen  
       2020-11-18 11:57:51 +08:00
    看用的框架有没有骨架,没有的话用 loading
    CODEWEA
        20
    CODEWEA  
       2020-11-18 12:10:27 +08:00
    placeholder
    npe
        21
    npe  
       2020-11-18 12:37:34 +08:00   ❤️ 1
    骨架屏
    RickyC
        22
    RickyC  
       2020-11-18 13:52:28 +08:00
    @cszchen 我一直 vue 和 jQuery 配合使用, dom 操作还是很常用的, 对我来说
    qxqsxbd
        23
    qxqsxbd  
       2020-11-18 15:42:36 +08:00
    因为你少个数据获取中的状态,类比 Promise 的三个状态 Pending (获取中)、Resolve (有数据)和 Reject (没数据)
    redbuck
        24
    redbuck  
       2020-11-18 16:43:01 +08:00
    LS 加一

    你需要增加一个状态
    ljpCN
        25
    ljpCN  
       2020-11-18 18:10:32 +08:00 via Android
    区分一下初始状态(尚未 fetch)和空状态(fetch 的结果为空),初始状态显示一个尚未获取或者显示 loading,空状态显示未获取到数据的提示。
    azh7138m
        26
    azh7138m  
       2020-11-18 20:45:37 +08:00 via iPhone
    @RickyC

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

    互相讨论低质量问题只会是浪费时间
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2801 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 00:10 · PVG 08:10 · LAX 16:10 · JFK 19:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.