Heim  >  Artikel  >  Web-Frontend  >  Warum kann der Laui-Fortschrittsbalken nicht gerendert werden?

Warum kann der Laui-Fortschrittsbalken nicht gerendert werden?

王林
王林nach vorne
2021-03-10 11:07:523516Durchsuche

Warum kann der Laui-Fortschrittsbalken nicht gerendert werden?

Vorwort:

Das Rendern des Laui-Fortschrittsbalkens ist in zwei Situationen unterteilt, nämlich statisches Rendern und dynamisches Rendern.

 <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>

Mit dem obigen Codeteil allein kann der Fortschrittsbalkenwert nicht angezeigt werden.

(1) Statisches Rendering

Der Fortschrittsbalken hängt von der Elementkomponente ab. Wenn sie nicht eingeführt wird, wird der Fortschrittsbalken nicht angezeigt.

layui.use(&#39;element&#39;, function () {
    var element = layui.element;
});

Zu diesem Zeitpunkt zeigt der Fortschrittsbalken das Ergebnis wie folgt an:

Warum kann der Laui-Fortschrittsbalken nicht gerendert werden?

(Freigabe von Lernvideos: HTML-Video-Tutorial)

(2) Dynamisches Rendering

Wenn Sie den Fortschrittswert dynamisch ändern müssen Auf der offiziellen Laui-Website heißt es, dass das Elementmodul die grundlegende Methode element.progress() des Fortschrittsbalkens bereitstellt.

Stellen Sie zunächst den Fortschrittsbalkenfilter ein (lay-filter="demo"), und dann müssen Sie diese Methode nur in einem Ereignis oder einer Anweisung ausführen, um den Genauigkeitsbalkenwert dynamisch zu ändern. Den in der Genauigkeitsleiste angezeigten Prozenttext müssen Benutzer jedoch selbst ändern.

element.progress(&#39;demo&#39;, &#39;80%&#39;);

Der Wert des Fortschrittsbalkens ändert sich zu diesem Zeitpunkt:

Warum kann der Laui-Fortschrittsbalken nicht gerendert werden?

Verwandte Empfehlungen: layui-Tutorial

Das obige ist der detaillierte Inhalt vonWarum kann der Laui-Fortschrittsbalken nicht gerendert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen