uniapp 自定义进度条_uni-app开发之实现QQ小程序progress组件进度自动变化

版权声明：本文为博主原创文章，如果转载请给出原文链接：http://doofuu.com/article/4156221.html

上篇文章写了关于QQ小程序加群和加好友的功能实现。今天遇到个实现QQ小程序progress组件进度自动变化的需求，类似文件下载进度条的样子。其实也就是定时添加进度条的值。看了下progress组件文档并没有现成的属性可以设置，不像微信小程序支持duration属性，所以就用定时增加percent的方式实现了一下，效果还不错！

具体原理就是通过定时器定时增加percent的值来实现progress进度自动变化。很简单，代码如下：onLoad: function(options) {

this.addPercent();

},

addPercent:function(e){

var that = this;

if(that.percent 

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方法里面添加逻辑代码，比如达到多少时变快、超过上限时隐藏面板等等。好了，就分享到这吧，下班回家~

小程序效果可以看这里

祝生活愉快！

「创作不易，你的支持是本站持续更新最大的动力！」

赏

1

谢谢你请我喝奶茶*^_^*

支付宝

微信