版权声明:本文为博主原创文章,如果转载请给出原文链接: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组件进度自动变化