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


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实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
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初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
Python-基础-入门 简介
2014/08/09 Python
python装饰器decorator介绍
2014/11/21 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
python实现微信打飞机游戏
2020/03/24 Python
python实现文字版扫雷
2020/04/24 Python
Python如何安装第三方模块
2020/05/28 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
自考生自我评价分享
2014/01/18 职场文书
高一英语教学反思
2014/01/22 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang
springboot实现string转json json里面带数组
2022/06/16 Java/Android