附件是尝试制作线性进度组件的工作原型(prototype)的伪代码。
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% 的进度。原型(prototype)不起作用。它的哪一部分可能出了问题?以下引用资料是我从官方引用文档中获得的最佳引用资料。
引用资料
最佳答案
长话短说
只需替换 JavaScript 行 overallProgress.setProgress(0.5);
进入 overallProgress.progress=0.5;
详情
我喜欢 source-code of MDCLinearProgress事实证明它是使用 JavaScript function setters 实现的.函数 setter 的工作方式是在类中声明为方法,但实际设置值是将其视为属性。
因此,不要使用 setProgress(value)
,而是将其替换为 progress=value
。
关于javascript - Material Design LinearProgress 组件的工作示例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53948547/