4

附件是用于尝试制作线性进度组件的工作原型的伪代码。

HTML

<script src="https://unpkg.com/material-components-web@0.42.1/dist/material-components-web.min.js"></script>
...
<div role="progressbar" class="mdc-linear-progress" id="my-progress-bar">
    <div class="mdc-linear-progress__buffering-dots"></div>
    <div class="mdc-linear-progress__buffer"></div>
    <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
        <span class="mdc-linear-progress__bar-inner"></span>
    </div>
    <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
        <span class="mdc-linear-progress__bar-inner"></span>
    </div>
</div>

JavaScript

const overallProgress = mdc.linearProgress.MDCLinearProgress.attachTo(document.getElementById('my-progress-bar'));
overallProgress.setProgress(0.5);

上述代码旨在显示 50% 的进度。原型不起作用。它的哪一部分可能出错了？以下参考资料是我可以从官方参考文件中获得的最佳参考资料。

参考

  1. 线性进步，网页材料设计
  2. 线性进度演示，Web 的材料设计
4

1 回答 1

6

TL;博士

只需将 JavaScript 行替换overallProgress.setProgress(0.5); 为overallProgress.progress=0.5;

细节

我挖掘了MDCLinearProgress 的源代码，结果发现它是使用JavaScript 函数 setter实现的。函数设置器的工作方式是在类中声明为方法，但实际设置值是将其视为属性。

因此，不要使用setProgress(value)，而是将其替换为progress=value。

于 2018-12-27T18:21:00.337 回答