So implementieren Sie den Download-Fortschrittsbalken im WeChat-Applet

In diesem Artikel wird hauptsächlich die Methode zur Implementierung des Download-Fortschrittsbalkens im WeChat-Applet vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen

Wir sehen oft den Download-Fortschrittsbalken bei APP-Downloads. Dieser Fortschrittsbalken dient der Interaktion mit dem Benutzer und der Information des Benutzers über den aktuellen Fortschritt Warten. Es stürzt ab, wenn Sie länger als 1 Minute warten. Heute werde ich Ihnen zeigen, wie Sie einen Download-Fortschrittsbalken in einem Miniprogramm erstellen.

Der Fortschrittsbalken ist eine Komponente des WeChat-Miniprogramms und der Fortschrittsbalken von HTML5 ähnelt dem Fortschritt.

Einführung in die Fortschrittsattribute

属性名	作用	参数值
percent	进度百分比0~100
show-info	在进度条右侧显示百分比	true/false 默认false
active	进度条从左往右的动画	true/false 默认false
stroke-width	进度条线的宽度，单位px	默认6px
color	进度条颜色	#09BB07
activeColor	已选择的进度条的颜色
backgroundColor	未选择的进度条的颜色

Fortschrittsbalkenproduktion herunterladen

1. Wxml-Produktion anzeigen

<progress percent="100" active=&#39;true&#39; stroke-width="4" />
<view class=&#39;title-line&#39;>
 progress</view>

<view class=&#39;column&#39;>
 <button class=&#39;button&#39; type=&#39;primary&#39; size=&#39;mini&#39; bindtap=&#39;startDown&#39;>开始下载</button>

 <text class="title">下载进度：</text>

 <progress percent="{{percent}}" show-info active=&#39;{{isDown}}&#39; stroke-width="14" />
</view>

1. Hier zeigen wir Ihnen nicht nur, wie Sie einen Download-Fortschrittsbalken erstellen, sondern auch, wie Sie während des Ladevorgangs einer Webseite einen Fortschrittsbalken erstellen, also die Ladezeile oben. Das Prinzip ist das gleiche und der Kern ist immer noch im Miniprogramm enthalten. Der Steuerungsfortschritt

2. aktiv wird verwendet, um die Anzeige der Fortschrittsbalkenanimation zu steuern

3. Prozent, um den Fortschritt des ausgewählten Fortschrittsbalkens festzulegen

4. Wenn zum Starten des Downloads darauf geklickt wird, wird das startDown-Ereignis ausgelöst

2. Der Code in xxx.js

Page({
 data: {
 isDown: false,
 percent: 0,
},
startDown: function (e) {
 this.setData({
  isDown: true,
  percent: 100,
 })
 },

js ist relativ einfach, isDown in den Daten steuert, ob der Download gestartet werden soll, Prozentsatz legt den Download-Fortschrittsbalken fest

startDown-Griffe Die Logik zum Starten des Downloads aktualisiert den Download-Fortschrittsbalken und startet den Download-Animationseffekt.

Zusammenfassung

Der Fortschrittsbalken hat viele Verwendungsmöglichkeiten Zwei Beispiele oben. Tatsächlich kann der Fortschrittsbalken auch als Fortschrittsbalken für die verbleibenden Verkäufe von Eilverkäufen, die verbleibende Zeit bis zur Fertigstellung usw. verwendet werden. Ich werde den Lesern eine kleine Hausaufgabe hinterlassen, die sie erledigen können Zwei Beispiele für Fortschrittsbalken, die ich einzeln aufgelistet habe. Nun, das ist alles für die heutige Erklärung der Fortschrittsbalken.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Pseudo-Array-Verwendung in JavaScript (ausführliches Tutorial)

So ermitteln Sie den Client-Typ mit JS

So verwenden Sie Webpack zum Extrahieren von Bibliotheken von Drittanbietern

JavaScript-Moduloptimierung

So verwenden Sie Webpack +express, um die Entwicklung mehrerer Seitenseiten zu erreichen

Webpack-Framework (Beherrschung der Kerntechnologie)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Download-Fortschrittsbalken im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!