微信小程序实现下载进度条的方法

微信小程序实现下载进度条的方法
​我们经常会在APP下载中看到下载进度条，这个进度条是为了和用户交互，告知用户当前的进度，不然让用户一直处于等待，用户等超过1分钟就会崩溃的，今天代码君就教大家如何在小程序中也制作下载进度条，本文主要介绍了微信小程序实现下载进度条的方法，希望能帮助到大家。

我们经常会在app下载中看到下载进度条，这个进度条是为了和用户交互，告知用户当前的进度，不然让用户一直处于等待，用户等超过1分钟就会崩溃的，今天代码君就教大家如何在小程序中也制作下载进度条，本文主要介绍了微信小程序实现下载进度条的方法，希望能帮助到大家。

progress进度条是微信小程序的组件，和HTML5的进度条progress类似。

progress属性介绍

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

下载进度条制作

一、wxml视图制作

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