版权声明：本文为博主原创文章，如果转载请给出原文链接：http://doofuu.com/article/4156221.html
上篇文章写了关于QQ小程序加群和加好友的功能实现。今天遇到个实现QQ小程序progress组件进度自动变化的需求，类似文件下载进度条的样子。其实也就是定时添加进度条的值。看了下progress组件文档并没有现成的属性可以设置，不像微信小程序支持duration属性，所以就用定时增加percent的方式实现了一下，效果还不错！
具体原理就是通过定时器定时增加percent的值来实现progress进度自动变化。很简单，代码如下：
<progress :percent="percent" activeColor="#FE8DAD" active="true" stroke-width="3" active-mode="forwards"/>
onLoad: function(options) {
this.addPercent();
},
addPercent:function(e){
var that = this;
if(that.percent < 100){
that.percent = that.percent + 2
setTimeout(function(){
that.addPercent()
},120);
}
}每隔120毫秒进度值添加2点，这里可以通过设置不同的时间、添加值来控制progress进度的变化快慢，记住这里一定要设置progress进度的属性active="true"、active-mode="forwards"，active控制进度条变化的方向从左到右，active-mode设置进度条动画从上次结束点接着播。具体参数就看uniapp的官方文档吧。
还有QQ小程序progress不支持activeend动画完成事件，这里也可以在addPercent方法里面添加逻辑代码，比如达到多少时变快、超过上限时隐藏面板等等。好了，就分享到这吧，下班回家~
小程序效果可以看这里
祝生活愉快！
「创作不易，你的支持是本站持续更新最大的动力！」
谢谢你请我喝奶茶*^_^*
支付宝
微信
共有 0 条评论 - uni-app开发之实现QQ小程序progress组件进度自动变化