Question

有没有办法显示，例如纸张进度，只有当数据在模板内呈现并隐藏它时，渲染完成？

Answer 1

在元素开始时启动纸张进度，并在数据呈现时停止它，即：在<template is="dom-repeat">数据助手元素上。

<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="paper-progress.html">
<style is="custom-style">
  paper-progress {
    display: block;
    width: 100%;
    margin: 20px 0;
  }
  paper-progress.blue {
    --paper-progress-active-color: var(--paper-light-blue-500);
    --paper-progress-secondary-color: var(--paper-light-blue-100);
  }

</style>
<paper-progress indeterminate class="blue" disabled="{{progresDisabled}}"></paper-progress>
<template is="dom-repeat" item='data' rendered-item-count="{{count}}">
     <div>[[data.name]]</div>
</template>
...

观察圆顶重复时渲染的项目：

...
static get observers() { return ['checkToDisableProgress(count)'] }

 checkToDisableProgress(count){
        this.set('progresDisabled', count!=0 ? true : false)
 }

聚合物：如何在渲染模板时显示纸张进度或微调器

1 个答案: