如何让 vuefire 显示加载屏幕?

Posted

技术标签:

【中文标题】如何让 vuefire 显示加载屏幕?【英文标题】:How can I make vuefire show loading screen? 【发布时间】:2018-01-28 16:41:07 【问题描述】:

作为标题 Vuefire 可以自动从 firebase 数据库中获取数据,但它需要一些加载时间。 所以我想在获取数据之前显示一些 css 动画,当它成功时我可以观看任何事件

【问题讨论】:

如果检查数据v-show,请尝试使用vue-spinner 【参考方案1】:

您可以通过多种方式做到这一点。 Vuefire 具有开箱即用的readyCallback,当获取数据(准备好)时调用回调。

这里是:

var vm = new Vue(
  el: '#demo',
  data: function() 
    return 
       loaded: false
    
  
  firebase: 
    // simple syntax, bind as an array by default
    anArray: db.ref('url/to/my/collection'),
    // can also bind to a query
    // anArray: db.ref('url/to/my/collection').limitToLast(25)
    // full syntax
    anObject: 
      source: db.ref('url/to/my/object'),
      // optionally bind as an object
      asObject: true,
      // optionally provide the cancelCallback
      cancelCallback: function () ,
      // this is called once the data has been retrieved from firebase
      readyCallback: function () 
         this.loaded = true // NOTE THIS LINE
      
    
  
)

【讨论】:

【参考方案2】:

另一个答案中的readyCallback 方法对我不起作用。我收到一个错误document.onSnapshot is not a function

相反,我使用binding approach 在加载完成时设置一个标志。

<script>
    // ...

    export default 
        data() 
            return 
                data: [],
                loaded: false,
            
        ,
        mounted() 
            this.$bind('data', firebase.firestore().collection('someDocRef'))
                .then(() => this.loaded = true);
        ,
    
</script>

然后我的模板可以有条件渲染的加载屏幕:

<template>
    <template v-if="!loaded">
        <p>Loading...</p>
    </template>

    <template v-if="loaded">
        <!-- Display data here -->
    </template>
</template>

【讨论】:

这对我有用,应该打勾作为答案。虽然,与这个答案相比,我的代码有一点变化 mount() this.$bind("data", db.collection("documents")).then( () => (this.loaded = true) );我使用了db.collections... 而不是firebase.firestore,这是我从我的firebase 配置文件中导出的。

以上是关于如何让 vuefire 显示加载屏幕?的主要内容,如果未能解决你的问题,请参考以下文章

如何让屏幕阅读器停止阅读并阅读不同的内容

如何在 WatchOS2 中显示系统加载屏幕?

如何在两个屏幕之间显示加载微调器

从 Firebase 获取数据时如何显示加载屏幕

如何使用openGL在屏幕上显示加载的纹理

Flutter 在使用 StreamBuilder 从 firebase 加载数据之前显示红色错误屏幕,如何解决?