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


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 相关文章推荐
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
vue 调用 RESTful风格接口操作
Aug 11 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字符串 ==比较运算符的副作用
2009/10/21 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
Python和php通信乱码问题解决方法
2014/04/15 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
pycharm显示远程图片的实现
2019/11/04 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
python列表返回重复数据的下标
2020/02/10 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
研究生求职推荐信范文
2013/11/30 职场文书
销售部主管岗位职责
2013/12/18 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
幼儿园开学寄语
2014/04/03 职场文书
运动会班级口号
2014/06/09 职场文书
党支部对转正的意见
2015/06/02 职场文书
农村婚庆主持词
2015/06/29 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android