So implementieren Sie den Download-Fortschrittsbalken im WeChat-Applet

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

aktiv

Attributname

Funktion

Parameterwert th>

Prozent

Fortschrittsprozentsatz 0~100

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

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

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>

Hier haben wir nicht nur Ich werde Ihnen beibringen, wie Sie einen Fortschrittsbalken für den Download einer Webseite erstellen. Das Prinzip ist jedenfalls dasselbe Kern ist die eigene Steuerung des Fortschritts des Miniprogramms
aktiv. Steuern Sie die Anzeige der Fortschrittsbalkenanimation.
Prozent. Legen Sie den Fortschritt des ausgewählten Fortschrittsbalkens fest
Wenn Sie darauf klicken, um den Download zu starten, lösen Sie das startDown-Ereignis aus

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!