广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序怎样实现下载进度条
  • 112
分享到

微信小程序怎样实现下载进度条

微信小程序 2022-10-19 03:10:22 112人浏览 独家记忆
摘要

这篇文章主要介绍了微信小程序怎样实现下载进度条,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。效果:progress进度条是微信小程序的组件,

这篇文章主要介绍了微信小程序怎样实现下载进度条,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

效果:

微信小程序怎样实现下载进度条

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频道,更多相关知识等着你来学习!

--结束END--

本文标题: 微信小程序怎样实现下载进度条

本文链接: https://www.lsjlt.com/news/69233.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序怎样实现下载进度条
    这篇文章主要介绍了微信小程序怎样实现下载进度条,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。效果:progress进度条是微信小程序的组件,...
    99+
    2022-10-19
    微信小程序
  • 微信小程序进度条怎么实现
    这篇文章主要介绍“微信小程序进度条怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序进度条怎么实现”文章能帮助大家解决问题。progress进度条。属性名类型默认值说明percentF...
    99+
    2023-06-26
  • 微信小程序实现圆心进度条
    本文实例为大家分享了微信小程序实现圆心进度条的具体代码,供大家参考,具体内容如下 一、创建项目结构 打开微信开发者工具创建一个项目, 新建 与 pages 同级目录 componen...
    99+
    2022-11-13
    微信小程序进度条 微信小程序圆心进度条 小程序进度条
  • 微信小程序实现环形进度条
    本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下 index.wxss .circle {   position: absolute;   left:...
    99+
    2022-11-13
    微信小程序环形进度条 微信小程序进度 微信小程序进度条
  • 微信小程序怎么实现环形进度条
    本篇内容主要讲解“微信小程序怎么实现环形进度条”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序怎么实现环形进度条”吧!index.wxss.circle { &nbs...
    99+
    2023-07-02
  • 微信小程序怎么实现圆心进度条
    这篇文章主要介绍“微信小程序怎么实现圆心进度条”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序怎么实现圆心进度条”文章能帮助大家解决问题。一、创建项目结构打开微信开发者工具创建一个项目, 新...
    99+
    2023-07-02
  • 微信小程序用canvas实现圆形进度条
    本文实例为大家分享了微信小程序用canvas实现圆形进度条的具体代码,供大家参考,具体内容如下 先放效果图,如下: 1. wxml文件代码如下 对于圆形进度条中间的文字,如果是简单...
    99+
    2022-11-13
    微信小程序canvas进度条 微信小程序圆形进度条 微信小程序进度条
  • 微信小程序实现带滑块的进度条
    微信小程序项目需求,要实现一个带滑块并可左右滑动的进度条,看了小程序的文档,发现上面的progress组件无法满足需求,所以我自己写了一个,在这里总结一下。 一、效果图 二、实现逻...
    99+
    2022-11-13
    微信小程序 滑块 进度条
  • 微信小程序怎么实现带滑块的进度条
    今天小编给大家分享一下微信小程序怎么实现带滑块的进度条的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、效果图二、实现逻辑功...
    99+
    2023-07-02
  • 微信小程序中如何实现圆形进度条
    这篇文章主要为大家展示了“微信小程序中如何实现圆形进度条”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序中如何实现圆形进度条”这篇文章吧。需求概要小程序...
    99+
    2022-10-19
    微信小程序
  • 微信小程序使用slider实现音频进度条
    众所周知哈,微信小程序里面的音频播放是没有进度条的,但最近有个项目呢,客户要求音频要有进度条控制,所以就想到了用slider来实现音频的进度条显示及控制 微信小程序的slider组件...
    99+
    2022-11-13
    微信小程序 音频 进度条
  • 微信小程序怎么使用slider实现音频进度条
    这篇文章主要介绍了微信小程序怎么使用slider实现音频进度条的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序怎么使用slider实现音频进度条文章都会有所收获,下面我们一起来看看吧。微信小程序的sli...
    99+
    2023-07-02
  • 微信小程序如何实现实时圆形进度条
    这篇文章主要为大家展示了“微信小程序如何实现实时圆形进度条”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序如何实现实时圆形进度条”这篇文章吧。效果图如下...
    99+
    2022-10-19
    微信小程序
  • 怎么设置微信小程序线条样式
    这篇文章主要介绍“怎么设置微信小程序线条样式”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么设置微信小程序线条样式”文章能帮助大家解决问题。canvasContext.setStrokeStyle...
    99+
    2023-06-26
  • 微信小程序如何实现流程进度的图样式功能
    这篇文章给大家分享的是有关微信小程序如何实现流程进度的图样式功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。最近正在做微信小程序,需要实现一个流程进度的图样式如下面 ...
    99+
    2022-10-19
    微信小程序
  • php怎么实现下载进度条
    本篇内容主要讲解“php怎么实现下载进度条”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“php怎么实现下载进度条”吧!php实现下载进度条的方法:1、创建“download.php”文件,代码如...
    99+
    2023-06-25
  • 微信小程序怎么实现滚动条功能
    这篇文章主要讲解了“微信小程序怎么实现滚动条功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序怎么实现滚动条功能”吧!view<view class="c...
    99+
    2023-07-02
  • 微信小程序实现滚动条功能
    本文实例为大家分享了微信小程序实现滚动条的具体代码,供大家参考,具体内容如下 view <view class="conty">   <!-- 滚动字幕 --&g...
    99+
    2022-11-13
    微信小程序 滚动条
  • 微信小程序实现横向滚动条
    本文实例为大家分享了微信小程序横向滚动条的具体代码,供大家参考,具体内容如下 微信小程序scroll-view实现横向滑动滚动 效果图如下: 左右滑动效果展示如下: 实现代码: ...
    99+
    2022-11-13
    微信小程序横向滚动条 微信小程序横向滚动 微信小程序滚动条
  • 微信小程序怎么设置线条端点样式
    本篇内容主要讲解“微信小程序怎么设置线条端点样式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序怎么设置线条端点样式”吧!canvasContext.setLineCap定义设置线条的端...
    99+
    2023-06-26
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作