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


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入门应用一
Nov 19 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
Javascript动画效果(1)
Oct 11 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
实例讲解React 组件生命周期
Jul 08 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
牡丹941资料
2021/03/01 无线电
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Python中实现的RC4算法
2015/02/14 Python
Django发送html邮件的方法
2015/05/26 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
python+tkinter实现学生管理系统
2019/08/20 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
Python中Qslider控件实操详解
2021/02/20 Python
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
六十岁生日答谢词
2014/01/10 职场文书
成龙洗发水广告词
2014/03/14 职场文书
百年校庆节目主持词
2014/03/27 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
停水通知
2015/04/16 职场文书
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS