您好,小程序模板欢迎您。
小程序模板
当前位置 : 首页> 小程序教程> 小程序怎么实现动态进度条

小程序怎么实现动态进度条

微信小程序提供了progress组件,用于实现进度条。可查看progress组件

但今天需要实现的是动态从后台获取值,更加直观的展示出完成某功能的进度。


效果展示:

888QQ截图20211117085632.png

在开始写代码前,有两个属性需要了解,开发文档给出的定义如下:

percent 百分比0~100

duration 进度增加1%所需毫秒数

而我们就需要利用这两个属性,完成进度条的动态显示。


首先将完成进度增加1%所需毫秒数(duration属性)设置固定值为30ms,接着从后台获取完成此功能所需的总时间(percent),最后用active属性展示动画效果。


代码部分:

index.wxml文件



index.js文件:

Page({
data: {
    percent: 0
    },
progress: function() {
let that = this;
let percent = xxx; //获取percent
that.setData({
        percent: percent
      })
  }
 });


联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了