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

 更新时间:2017年12月08日 09:38:31   作者:代码君_Coder  
本篇文章主要介绍了微信小程序实现下载进度条的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

我们经常会在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中的原型链prototype介绍

    JavaScript中的原型链prototype介绍

    这篇文章主要介绍了JavaScript中的原型链prototype介绍,本文讲解了访问原型对象的3种方法,判断两个对象间是否存在原型链关系的方法等,需要的朋友可以参考下
    2014-12-12
  • 第三篇Bootstrap网格基础

    第三篇Bootstrap网格基础

    Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,网格系统类似一个表格。接下来通过本文给大家介绍Bootstrap网格基础,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06
  • js中关于promise的用法解读

    js中关于promise的用法解读

    这篇文章主要介绍了js中关于promise的用法解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • js复制网页内容并兼容各主流浏览器的代码

    js复制网页内容并兼容各主流浏览器的代码

    js 复制网页内容的方法代码有很多不过要兼容各浏览器就不多了,下面有个不错的方法,大家可以尝试操作下
    2013-12-12
  • javascript实现base64 md5 sha1 密码加密

    javascript实现base64 md5 sha1 密码加密

    本篇文章给大家介绍了javascript实现密码加密,通过base64、md5、sha1文件,调用相关方法实现密码加密,非常简单,需要的朋友可以参考下
    2015-09-09
  • WEB开发之注册页面验证码倒计时代码的实现

    WEB开发之注册页面验证码倒计时代码的实现

    近期在搞一个H5+backbone 项目,验证输入手机号 验证码倒计时功能,代码中包含了前端样式布局代码和后端逻辑实现,思路明确,具有参考借鉴价值,需要的朋友参考下吧
    2016-12-12
  • webpack5处理图片、图标字体、多媒体等静态资源文件

    webpack5处理图片、图标字体、多媒体等静态资源文件

    在 webpack5 中内置了 file-loader、url-loader、raw-loader, 可以直接通过配置实现常用功能,下面就来介绍一下webpack5处理图片、图标字体、多媒体等静态资源文件的实现方法,感兴趣的可以了解一下
    2023-12-12
  • js代码实现下拉菜单【推荐】

    js代码实现下拉菜单【推荐】

    本篇文章主要分享了js代码实现下拉菜单的代码,可复制直接运行看效果,具有很好的参考价值,跟小编一起来看下吧
    2016-12-12
  • js中的事件委托或是事件代理使用详解

    js中的事件委托或是事件代理使用详解

    这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的,需要的朋友可以参考下
    2017-06-06
  • 前端图片懒加载的原理与3种实现方式举例

    前端图片懒加载的原理与3种实现方式举例

    图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力,下面这篇文章主要给大家介绍了关于前端图片懒加载的原理与3种实现方式的相关资料,需要的朋友可以参考下
    2023-03-03

最新评论