云诺说 - 小程序定制 - 广告营销
当前位置: QQ小程序 > uni-app开发之实现QQ小程序progress组件进度自动变化

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

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

版权声明:本文为博主原创文章,如果转载请给出原文链接: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方法里面添加逻辑代码,比如达到多少时变快、超过上限时隐藏面板等等。好了,就分享到这吧,下班回家~

小程序效果可以看这里

7107e6ea5dd55fb64e1a7fb168c49907.png

 

祝生活愉快!

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

赞(0) 打赏

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

支付宝
微信
1

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

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - uni-app开发之实现QQ小程序progress组件进度自动变化

博客简介

云诺说是一个致力于分享互联网编程技术交流、小程序开发、小程序源码分享、网络推广引流服务、推荐优质的引流渠道、广告开户、竞价推广等行业的IT技术网站,希望你能在本站得到你所需要的信息。

Q Q :2730094141

微信 :LGY17666

职业 :小程序开发、网络推广

现居 :广东省-广州市-天河区

友情链接

欢迎与本博客交换友情链接,本博客对交换链接的网站没有要求。如果您是本博客的友情链接网站,在遇到网站运行问题时,可以随时联系,我们将免费提供技术类支持! 申请交换友链

站点统计

  • 文章总数:109 篇
  • 草稿数目:0 篇
  • 分类数目:14 个
  • 独立页面:119 个
  • 评论总数:0 条
  • 访问总量: 86931次
  • 最近更新:2020年10月01日