Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to download the progress bar in the development of WeChat Mini Programs". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought. Let's study and learn how to download the progress bar in WeChat Mini Programs's development.

Effect:

The progress progress bar is a component of WeChat Mini Programs, similar to HTML5's progress bar progress.

Introduction to progress attribute

Attribute name action parameter value percent progress percentage 0,100

Show-info displays percentage on the right side of the progress bar true/false default falseactive progress bar left-to-right animation true/false default falsestroke-width progress bar width, unit px default 6pxcolor progress bar color # 09BB07activeColor the color of the selected progress bar

The color of the progress bar not selected by backgroundColor

Download progress bar production

1. Wxml view making

Progress starts downloading progress:

Here not only teach you how to make the download progress bar, but also teach you how to do the progress bar during the web page loading process, that is, the top line loading line, anyway, the principle is the same, the core is still Mini Program has its own control progress

Active is used to control the display of progress bar animation

Percent sets the progress of the selected progress bar

When you click to start the download, the startDown event is triggered

II. Xxx.js

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

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

StartDown processes the logic to start downloading, updates the download progress bar, and starts performing download animation effects

Thank you for your reading. the above is the content of "how to download the progress bar in the development of WeChat Mini Programs". After the study of this article, I believe you have a deeper understanding of the problem of how to download the progress bar in the development of WeChat Mini Programs. The specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.