2

如果我使用 firebase 查询如何在数据加载时显示微调器并在未加载时摆脱它。一个不错的演示会有所帮助。我似乎在文档中找不到任何东西。

  <firebase-query
    id="query"
    path="/category"
    data="{{viewcategory}}">
  </firebase-query>

例如像这个查询

而这个 dom-repeat

<template is="dom-repeat" items="[[viewcategory]]" strip-whitespace>
  <div class="item">
    <a class="image-link" href$="[[_getCategoryHref(item)]]">
      <my-image src="[[item.profileimage]]" alt="[[item.name]]"></my-image>
    </a>
    <h2>[[item.name]]</h2>
    <my-button>
      <a aria-label$="[[item.name]] my Now" href$="[[_getCategoryHref(item)]]">VIEW</a>
    </my-button>
  </div>
</template>

如何在加载项目之前显示微调器

4

1 回答 1

0
  1. 创建一个 div 并添加一些 csss，基本上说它应该具有页面的全高 + 宽度（或 dom 重复标记类别的区域......）和一些高 z-index + 所需的背景颜色。
  2. 将转纸器添加为此 div 的子项
  3. 将所有内容包装在 dom-if 中，然后使用 _loaded 函数检查您的数据状态...

例如：

_loaded(d){
        if(d.constructor === Array){   // check if the passed arg is an Array 
    	// here you can additionally check if length == 0 see comment below 		
    	return d.length > 0 ? false : true;
    } else {
    	// no array here --> show the spinner.. 
    	return true   
	}
 };
.spinner-container{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: red; /* debug color.. use your background color here*/
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;  
}
<template is="dom-if" if="[[_loaded(viewcategory)]]">
  <div class="spinner-container">
    <paper-spinner-lite active></paper-spinner-lite>
  </div>
</template>

如果你使用它，即使查询完成但没有返回任何结果，微调器也会旋转。所以如果你想显示类似“未找到类别”或类似的消息（当查询不返回任何内容时），你可以检查长度是否数组为 0，然后返回 false 并将另一个布尔值设置为 true，这会激活另一个显示消息的 dom-if ... 我不知道此行为是否在文档中，但我发现了该引用：

当查询没有结果时，firebase 总是返回空数组

我假设您使用的是 Polymer 2。

于 2018-01-24T23:34:29.737 回答