小程序 动态实现进度条

微信小程序提供了progress组件,用于实现进度条。可查看progress组件。
但今天需要实现的是动态从后台获取值,更加直观的展示出完成某功能的进度。
效果展示:
在这里插入图片描述

在开始写代码前,有两个属性需要了解,开发文档给出的定义如下:
percent 百分比0~100
duration 进度增加1%所需毫秒数

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

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

代码部分:
test.wxml文件



test.js文件

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

你可能感兴趣的:(小程序)