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

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

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

效果展示：

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

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
      })
  }
 });

上一篇：微信小程序面试题总结汇总及答案2024

下一篇：前端实现微信小程序信用分免押（也称微信分免押）

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

推荐标签

下载该资源用户也下载了

签到成功!