How to implement download progress bar in WeChat applet

We often see the download progress bar in APP downloads. This progress bar is to interact with the user and inform the user of the current progress. Otherwise, the user will be kept waiting. If the user waits for more than 1 minute, it will crash. Today’s code I will teach you how to create a download progress bar in a mini program. This article mainly introduces the method of implementing a download progress bar in a WeChat mini program. I hope it can help you.

The progress bar is a component of the WeChat applet, similar to the HTML5 progress bar progress.

Introduction to progress attribute

##Attribute nameFunctionParameter valuepercentProgress percentage 0~100##show-infoactive##stroke-widthThe width of the progress bar line, unit pxDefault 6pxcolorProgress bar color#09BB07activeColorThe color of the selected progress bar backgroundColorThe color of the unselected progress barDownload progress bar production

Display percentage on the right side of the progress bar	true/false Default false
Animation of the progress bar from left to right	true/false Default false

1. Wxml view 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>

Here It not only teaches you how to make a download progress bar, but also teaches you how to make a progress bar during the web page loading process, which is the loading line at the top. Anyway, the principle is the same, and the core is the progress control that comes with the mini program

1. active is used to control the display of progress bar animation

2. percent to set the progress of the selected progress bar

3. When clicked to start downloading When the startDown event is triggered
2. The code in xxx.js

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

js is relatively simple. The isDown in data controls whether to start downloading. percent sets the download progress bar

startDown handles the logic of starting the download, updates the download progress bar, and starts the download animation effect

Summary

The progress bar has many uses. The coder just listed the two examples above. In fact, the progress bar can also be used as a progress bar for the remaining sales of rush sales, the remaining time for completion, etc.

Related recommendations:

WeChat applet implements the function of clicking the button to change the font color

How does the WeChat applet implement the image enlargement preview function

Detailed explanation of WeChat mini program video, music, and picture components

The above is the detailed content of How to implement download progress bar in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!