Wir sehen oft den Download-Fortschrittsbalken bei APP-Downloads, um mit dem Benutzer zu interagieren und ihn über den aktuellen Fortschritt zu informieren. Wenn der Benutzer länger als 1 Minute wartet , es wird abstürzen. Ich werde Ihnen zeigen, wie Sie einen Download-Fortschrittsbalken in einem WeChat-Miniprogramm erstellen.
Der Fortschrittsbalken ist eine Komponente des WeChat-Applets, ähnlich dem HTML5-Fortschrittsbalken-Fortschritt.
Einführung in das Fortschrittsattribut
| Attributname | Funktion | Parameterwert th> | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Prozent | Fortschrittsprozentsatz 0~100 |
|
||||||||||||||||||||||||
| show-info | Prozentsatz auf der rechten Seite des Fortschrittsbalkens anzeigen | wahr/falsch, Standardeinstellung falsch | ||||||||||||||||||||||||
| Animation des Fortschrittsbalkens von links nach rechts | wahr/falsch, Standardeinstellung falsch | |||||||||||||||||||||||||
| Strichbreite | Die Breite der Fortschrittsbalkenlinie, Einheit px | Standard 6px | ||||||||||||||||||||||||
| Farbe | Farbe des Fortschrittsbalkens td> | #09BB07 | ||||||||||||||||||||||||
| activeColor | Die Farbe des ausgewählten Fortschrittsbalkens | backgroundColor | Die Farbe des nicht ausgewählten Fortschrittsbalkens |
1. Wxml-Produktion anzeigen
<progress percent="100" active='true' stroke-width="4" />
<view class='title-line'>
progress</view>
<view class='column'>
<button class='button' type='primary' size='mini' bindtap='startDown'>开始下载</button>
<text class="title">下载进度：</text>
<progress percent="{{percent}}" show-info active='{{isDown}}' stroke-width="14" />
</view>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 data steuert, ob der Download gestartet werden soll, und der Prozentsatz legt den Download-Fortschrittsbalken fest
startDown verwaltet die Logik zum Starten des Downloads und aktualisiert den Download-Fortschritt bar, und startet den Download-Animationseffekt
Zusammenfassung
Code Jun hat gerade die beiden oben aufgeführten Beispiele Der Fortschrittsbalken kann auch als Fortschrittsbalken für die verbleibenden Verkäufe von Eilverkäufen, die verbleibende Zeit bis zur Fertigstellung usw. verwendet werden. Verwandte Empfehlungen:Das WeChat-Applet implementiert die Funktion zum Ändern der Schriftfarbe durch Klicken auf eine Schaltfläche
So implementiert das WeChat-Applet die Bildvergrößerungs-Vorschaufunktion
Ausführliche Erklärung der Video-, Musik- und Bildkomponenten des WeChat-Miniprogramms
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!
