Polymer技术问询：模板渲染时如何显示paper-progress/加载器，完成后隐藏

没问题，我来给你一步步拆解在Polymer里实现这个需求的方法——就是让paper-progress或者加载spinner只在模板渲染数据的时候显示，渲染完自动消失。

第一步：先引入所需组件 #

首先得确保你已经导入了对应的Polymer组件，在你的元素顶部添加导入语句：

<!-- 导入paper-progress -->
<link rel="import" href="../paper-progress/paper-progress.html">
<!-- 或者导入paper-spinner（按需选择） -->
<link rel="import" href="../paper-spinner/paper-spinner.html">

核心实现思路 #

我们主要利用Polymer的数据绑定和生命周期/模板事件来控制加载组件的显示隐藏，分两种常见场景来处理：

场景1：异步获取数据后渲染模板 #

如果你的数据是从API或者异步请求来的，我们可以定义一个loading状态属性，初始为true（显示加载组件），当数据获取完成并赋值后，把loading设为false，自动隐藏加载组件。

完整代码示例：

<dom-module id="my-data-element">
  <template>
    <!-- 用paper-progress作为加载指示器 -->
    <paper-progress 
      indeterminate 
      hidden$="[[!loading]]"
      style="width: 100%;"
    ></paper-progress>

    <!-- 或者用paper-spinner，active属性绑定loading状态 -->
    <paper-spinner active$="[[loading]]"></paper-spinner>

    <!-- 你的数据渲染模板 -->
    <template is="dom-repeat" items="[[dataList]]">
      <div class="item-card">
        <h3>[[item.title]]</h3>
        <p>[[item.description]]</p>
      </div>
    </template>
  </template>

  <script>
    Polymer({
      is: 'my-data-element',
      properties: {
        loading: {
          type: Boolean,
          value: true // 初始处于加载状态
        },
        dataList: {
          type: Array,
          value: []
        }
      },
      ready() {
        // 页面就绪后发起数据请求
        this.loadRemoteData();
      },
      loadRemoteData() {
        // 这里替换成你的实际API请求，比如fetch或者axios
        setTimeout(() => {
          // 模拟获取到数据
          this.set('dataList', [
            {title: '第一篇文章', description: '这是测试数据1'},
            {title: '第二篇文章', description: '这是测试数据2'},
            {title: '第三篇文章', description: '这是测试数据3'}
          ]);
          // 数据加载完成，关闭加载状态
          this.set('loading', false);
        }, 1800); // 模拟网络延迟
      }
    });
  </script>
</dom-module>

场景2：已有数据但模板渲染耗时（比如大量数据） #

如果数据已经存在，但dom-repeat要渲染大量内容，我们可以监听模板的dom-change事件——这个事件会在模板的DOM完全渲染更新后触发。初始显示加载组件，事件触发后隐藏它。

代码示例：

<dom-module id="large-data-element">
  <template>
    <paper-progress 
      indeterminate 
      id="progressIndicator"
      style="width: 100%; margin-bottom: 16px;"
    ></paper-progress>

    <!-- 渲染大量数据的模板，监听dom-change事件 -->
    <template 
      is="dom-repeat" 
      items="[[largeDataSet]]"
      on-dom-change="handleRenderComplete"
    >
      <div class="large-item">[[item.id]] - [[item.content]]</div>
    </template>
  </template>

  <script>
    Polymer({
      is: 'large-data-element',
      properties: {
        largeDataSet: {
          type: Array,
          value() {
            // 生成1000条模拟数据
            let dataArr = [];
            for (let i = 0; i < 1000; i++) {
              dataArr.push({id: i+1, content: `第${i+1}条数据内容`});
            }
            return dataArr;
          }
        }
      },
      ready() {
        // 初始显示进度条
        this.$.progressIndicator.hidden = false;
      },
      handleRenderComplete() {
        // 模板渲染完成，隐藏进度条
        this.$.progressIndicator.hidden = true;
      }
    });
  </script>
</dom-module>

额外注意事项 #

• paper-progress的indeterminate属性：开启后会显示无限循环的动画，适合不知道加载时长的场景；如果能获取到加载进度，可以设置value和max属性来展示具体进度。
• paper-spinner用active属性控制旋转状态，比hidden更贴合组件的设计逻辑。
• 如果是多个模板同时渲染的复杂场景，可以设置一个计数器，监听所有模板的dom-change事件，全部完成后再隐藏加载组件。

内容的提问来源于stack exchange，提问作者Azrim