How to implement download progress bar in WeChat applet-Mini Program Development-php.cn

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 name Function Parameter value percent Progress percentage 0~100 ##show-info active ##stroke-width The width of the progress bar line, unit px Default 6px color Progress bar color #09BB07 activeColor The color of the selected progress bar backgroundColor The color of the unselected progress bar Download 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   下载进度：

Copy after login

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

active is used to control the display of progress bar animation
percent to set the progress of the selected progress bar
When clicked to start downloading When the startDown event is triggered

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

Copy after login

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!