小程序动态实现进度条

微信小程序提供了progress组件，用于实现进度条。可查看progress组件。
但今天需要实现的是动态从后台获取值，更加直观的展示出完成某功能的进度。
效果展示：

在开始写代码前，有两个属性需要了解，开发文档给出的定义如下：
percent 百分比0~100
duration 进度增加1%所需毫秒数
而我们就需要利用这两个属性，完成进度条的动态显示。

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

代码部分：
test.wxml文件

<progress percent="{{percent}}" backgroundColor="white" activeColor="green" duration="30"
border-radius="20" bindtap="progress" show-info active>
</progress>

test.js文件

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

小程序动态实现进度条相关推荐

微信小程序之圆形进度条（自定义组件）
前言昨天在微信小程序实现了圆形进度条,今天想把这个圆形进度条做成一个组件,方便以后直接拿来用. 根据官方文档自定义组件一步一步来创建自定义组件第一步创建项目结构打开微信开发者工具创建一个项目, ...
微信小程序进度条组件自定义数字_微信小程序之圆形进度条（自定义组件）
前言昨天在微信小程序实现了圆形进度条,今天想把这个圆形进度条做成一个组件,方便以后直接拿来用. 根据官方文档自定义组件一步一步来创建自定义组遇新是直朋能到件第一步创建项遇新是直朋能到分览目结构 ...
Mpvue微信小程序时间消耗进度条组件的实现
实现效果: 组件源码: 组件主要涉及时间的计算.闰年的判断,比较简单,因此注释比较少. <progress></progress>组件为微信小程序官方的进度条. <tem ...
微信小程序进度条样式_详解微信小程序——自定义圆形进度条
微信小程序自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: 页面初始化 options为页面跳转所带来的参数 ...
微信小程序环形进度条_微信小程序实现圆形进度条实例分享
本文主要和大家分享微信小程序实现圆形进度条实例,希望能帮助到大家. 小程序中使用圆形倒计时,效果图: 思路使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval 让彩色圆环 ...
微信小程序进度条样式_微信小程序组件progress进度条解读和分析
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
php投票的进度条,小程序实现投票进度条
本文实例为大家分享了小程序投票进度条的具体代码,供大家参考,具体内容如下示例图: 上代码: index.wxml: 进度 {{width}} 当前票数 {{quorumvotes}} index.w ...
微信小程序环形进度条_微信小程序实现圆形进度条动画
本文实例为大家分享了微信小程序动画之圆形进度条,供大家参考,具体内容如下上图: 代码: js: //获取应用实例 var app = getApp() var interval; var varNa ...
微信小程序环形进度条_Web微信小程序圆环形进度条组件CSS实现
首先理解小程序的自定义组件. 原理看了网上的一些教程,实现圆环用的是两个半圆的旋转,通过overflow: hidden来控制的. 首先绘制底层容器,一个正方形,通过圆角变圆,用来作为未读进度的圆环 ...

小程序动态实现进度条

小程序动态实现进度条相关推荐

最新文章

热门文章

小程序 动态实现进度条

小程序 动态实现进度条相关推荐

最新文章

热门文章

小程序动态实现进度条

小程序动态实现进度条相关推荐