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


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 相关文章推荐
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
JavaScript 数组详解
Oct 10 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
详解Node.js串行化流程控制
May 04 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
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实现与erlang的二进制通讯实例解析
2014/07/23 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
php商品对比功能代码分享
2015/09/24 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python使用fork实现守护进程的方法
2017/11/16 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
上海期货面试题
2014/01/31 面试题
《四季》教学反思
2014/04/08 职场文书
入党综合考察材料
2014/06/02 职场文书
平安工地汇报材料
2014/08/19 职场文书
户籍证明书标准模板
2014/09/10 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
道歉短信大全
2015/05/12 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL