微信小程序实现下载进度条的方法


Posted in Javascript onDecember 08, 2017

我们经常会在APP下载中看到下载进度条,这个进度条是为了和用户交互,告知用户当前的进度,不然让用户一直处于等待,用户等超过1分钟就会崩溃的,今天代码君就教大家如何在小程序中也制作下载进度条

微信小程序实现下载进度条的方法

progress进度条是微信小程序的组件,和HTML5的进度条progress类似。

progress属性介绍

属性名 作用 参数值
percent 进度百分比0~100
show-info 在进度条右侧显示百分比 true/false 默认false
active 进度条从左往右的动画 true/false 默认false
stroke-width 进度条线的宽度,单位px 默认6px
color 进度条颜色 #09BB07
activeColor 已选择的进度条的颜色
backgroundColor 未选择的进度条的颜色

下载进度条制作

一、wxml视图制作

<progress percent="100" active='true' stroke-width="4" />
<view class='title-line'>
 progress</view>

<view class='column'>
 <button class='button' type='primary' size='mini' bindtap='startDown'>开始下载</button>

 <text class="title">下载进度:</text>

 <progress percent="{{percent}}" show-info active='{{isDown}}' stroke-width="14" />
</view>
  1. 这里不光教大家学会制作下载进度条,顺带教大家做网页加载过程中的进度条,就是最上面那行加载线,反正原理是一样的,核心还是小程序自带控件progress
  2. active用于控制显示进度条动画
  3. percent 设置已选择的进度条进度
  4. 当点击开始下载的时候,触发startDown事件

二、xxx.js

Page({
 data: {
 isDown: false,
 percent: 0,
},
startDown: function (e) {
 this.setData({
  isDown: true,
  percent: 100,
 })
 },

js里的代码比较简单,data里面isDown控制是否开始下载,percent设置下载进度条

startDown 处理开始下载的逻辑,更新下载进度条,以及开始执行下载动画效果

总结

进度条用处很多,代码君只是列举了上面的两个例子,其实进度条还可以做抢购销量剩余进度条,时间完成剩余度等等,给读者留个小作业,请读者自行完成我列举出来的另外两个进度条例子,好啦,今天关于进度条就讲解到这里。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
jQuery表单验证之密码确认
May 22 jQuery
node文件批量重命名的方法示例
Oct 23 Javascript
解决js ajax同步请求造成浏览器假死的问题
Jan 18 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
js断点调试经验分享
Dec 08 #Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 #Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 #Javascript
javaScript字符串工具类StringUtils详解
Dec 08 #Javascript
javaScript日期工具类DateUtils详解
Dec 08 #Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 #Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 #Javascript
You might like
php 生成随机验证码图片代码
2010/02/08 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
python如何从文件读取数据及解析
2019/09/19 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
高中生学习生活的自我评价
2013/10/09 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
信访维稳承诺书
2015/05/04 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL