uni-app开发之实现QQ小程序progress组件进度自动变化

2019-12-20 07:42 分类：QQ小程序作者：云诺阅读(3574)

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

小程序效果可以看这里