Comment implémenter la barre de progression du téléchargement dans l'applet WeChat

Nous voyons souvent la barre de progression du téléchargement dans les téléchargements d'applications. Cette barre de progression sert à interagir avec l'utilisateur et à l'informer de la progression actuelle. Sinon, l'utilisateur attendra plus d'une minute. , il va planter. Le code d'aujourd'hui, je vais vous apprendre à créer une barre de progression de téléchargement dans un mini programme. Cet article présente principalement la méthode d'implémentation d'une barre de progression de téléchargement dans un mini programme WeChat.

La barre de progression est un composant de l'applet WeChat, similaire à la barre de progression HTML5.

Introduction à l'attribut de progression

actif

Nom de l'attribut

Fonction

Valeur du paramètre th>

pourcentage

Pourcentage de progression 0~100

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

show-info

Afficher le pourcentage sur le côté droit de la barre de progression

true/false par défaut false

Animation de la barre de progression de gauche à droite

true/false par défaut false

largeur de trait

La largeur de la ligne de la barre de progression, unité px

6px par défaut

couleur

Couleur de la barre de progression td>

#09BB07

activeColor

La couleur de la barre de progression sélectionnée

backgroundColor

La couleur de la barre de progression non sélectionnée

Télécharger la production de la barre de progression

1. Wxml voir la production

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

Ici, nous ne sommes pas seulement. vous apprendre à créer une barre de progression de téléchargement Au fait, je vais vous apprendre à créer une barre de progression pendant le processus de chargement d'une page Web, qui est la ligne de chargement en haut. Quoi qu'il en soit, le principe est le même. core est le propre contrôle de progression du mini programme
actif. Contrôler l'affichage de l'animation de la barre de progression
pourcentage Définir la progression de la barre de progression sélectionnée.
Lorsque vous cliquez pour démarrer le téléchargement, déclenchez l'événement startDown

2 Le code dans xxx.js

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

js est relativement simple. isDown dans les données contrôle s'il faut démarrer le téléchargement, et le pourcentage définit la barre de progression du téléchargement

startDown gère la logique de démarrage du téléchargement et met à jour la progression du téléchargement. et démarre l'effet d'animation de téléchargement

Résumé

Barre de progression Il existe de nombreuses utilisations. Code Jun vient de lister les deux exemples ci-dessus. la barre de progression peut également être utilisée comme barre de progression pour les ventes restantes des ventes urgentes, le temps restant pour la réalisation, etc.

Recommandations associées :

L'applet WeChat implémente la fonction de changement de couleur de la police en cliquant sur le bouton

Comment l'applet WeChat implémente la fonction de prévisualisation de l'agrandissement de l'image

Explication détaillée des composants vidéo, musique et image du mini programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!