Layui のプログレスバーが表示されないのはなぜですか?

前書き:

layui プログレス バーのレンダリングは、静的レンダリングと動的レンダリングの 2 つの状況に分けられます。

 <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="yes">
        <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
 </div>

上記のコードだけではプログレスバーの値を表示できません。

(1) 静的レンダリング

プログレスバーは要素コンポーネントに依存しており、導入されていない場合はプログレスバーは表示されません。

layui.use('element', function () {
    var element = layui.element;
});

プログレス バーには、この時点で次の結果が表示されます:

(学習ビデオ共有: html ビデオ チュートリアル)

(2) 動的レンダリング

プログレスバーの進行状況値を動的に変更する必要がある場合、layui 公式 Web サイトには、要素モジュールには基本メソッド element.progress() が提供されていると記載されています。

最初にプログレス バー フィルター (lay-filter="demo") を設定します。その後、イベントまたはステートメントでこのメソッドを実行するだけで、精度バーの値を動的に変更できます。ただし、精度バーに表示されるテキストの割合については、ユーザーが自分で変更する必要があります。

element.progress('demo', '80%');

この時点で、進行状況バーの値が変化します:

関連する推奨事項: layui チュートリアル

以上がLayui のプログレスバーが表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。