微信小程序之进度条

已于 2024-08-09 15:23:23 修改
阅读量644 收藏
点赞数 3
文章标签： 微信小程序 小程序 进度条
于 2024-03-25 13:11:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39772439/article/details/137010022
版权
本文介绍如何在微信小程序中实现进度条功能。只需将提供的代码复制到项目中，并调整percent属性以匹配应用内的动态数据即可。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

progress | 微信开放文档   点击链接就可以查看很详细

这我做的进度条 

只需要把微信那边代码复制过来即可，其他的改成自己动态数据就行。

percent:百分比值。

<view class="progress-box">
    <progress style="padding-top: 10px;" active :percent="m.bfb" stroke-width="3"/>
</view>

微信小程序：日常记一记 可查看

zwj的CS-DN
关注
微信小程序组件—progress(进度条)
qq_39702981的博客
11-29 1万+
progress 进度条。 属性名 类型 默认值 说明 最低版本 percent Float 无 百分比0~100 show-info Boolean false 在进度条右侧显示百分比 border-radius Number / String 0 圆角大小，单位px（2.4.0起支......
微信小程序｜进度条
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
07-29 6324
进度条是一个常见的用户界面元素，用于显示任务或操作的完成进度，可以在任何需要指示任务进度的情况下使用，以提供更好的用户体验和反馈。
微信小程序 实现进度条效果
weixin_71403100的博客
01-24 4703
微信小程序中的原生进度条组件（Progress）只能显示一种进度状态，但有时我们需要展示多种状态，比如预算已使用与本次申请的进度。为了实现这一功能，我采用了 canvas 来绘制多种状态的进度条。记录下小程序原生组件 Progress 的单状态使用，以及通过 canvas 实现多状态进度条的方法。
微信小程序实现时间进度条功能
10-15
主要为大家详细介绍了微信小程序实现时间进度条功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序—progress(进度条)
热门推荐
Afanbaby的博客
12-12 3万+
官网api：https://mp.weixin.qq.com/debug/wxadoc/dev/component/progress.html 进度条是一种用户体验很好的加载状态，如软件升级下载进度， 视频，图片下载进度，以及上传等， 效果图如下，1.index.js中：//index.js //获取应用实例 const app = getApp() var isFirst = true; var
微信小程序进度条
weixin_30843605的博客
09-15 1464
<button class='down-img' bindtap='downImg' data-scr='{{imageUrl}}'>下载图片{{progress}}</button> downImg: function (e) { var _this = this; // 获取图片地址(http://www.playsort...
微信小程序圆形进度条可拖动
最新发布
11-22
微信小程序圆形进度条可拖动功能是开发者在微信平台上实现的一种用户交互方式，主要用于展示某项操作或任务的完成度，并允许用户通过拖动的方式与之互动。圆形进度条在视觉上呈现为圆环形状，能够以360度的完整圆环...
微信小程序画布圆形进度条显示效果
08-27
微信小程序画布圆形进度条显示效果 微信小程序画布圆形进度条显示效果是一种常见的UI效果，在微信小程序中，开发者可以使用Canvas绘图来实现圆形进度条的显示。本文将详细介绍微信小程序画布圆形进度条显示效果的...
微信小程序实现下载进度条的方法
08-28
在微信小程序开发中，实现一个下载进度条是一个非常实用的功能，它能提供良好的用户体验，让使用者了解任务的进展情况。本文将详细介绍如何在微信小程序中创建一个下载进度条，并提供相关的代码示例。 首先，微信小...
微信小程序简单实现进度条Progress
jinaiminm的博客
06-21 408
先看效果：我是看了vant weApp的progress，而且我这边需求不多只需要实现进度条让用户看到就可以，我自己写了一个模拟数据:我认为需求不多，自己使用普通标签就可以实现，在这里zongf是我要显示的长度，为什么要设置小数点呢，因为我给的长度是100%，max-width也是100%，显示的区域最大是100%，长度可以自己设置哈，我是觉得css挺有意思的，本人是小菜鸡，只是想分享自己的感受，如有不足，请大佬多多指教，谢谢
微信小程序制作圆形进度条
老D工作室
04-10 2528
选择一个目录建立一个文件夹，比如 mycircle 吧，另外把对应 page 的相关文件都建立出来，包括 js，json，wxml 和 wxcc。
进度条小程序
xxtzzxx的博客
08-12 1613
接下来通过编写一个进度条小程序来学习了解一些小知识。
[Uni-app] 微信小程序的圆环进度条
C201008的专栏
03-19 2991
【代码】[Uni-app] 微信小程序的圆环进度条。
微信小程序|开发实战篇之七-steps进度条组件
Rookie1012的博客
01-29 3008
开发实战篇之七前言1、picker选择器组件 前言 实战篇内容参考： 1、Lin Ui开源组件源码分析。https://doc.mini.talelin.com/ 2、开发过程遇到问题。 1、picker选择器组件
linux下的小程序-进度条（简易）
今天也要努力鸭
04-20 305
在写进度条小程序之前，要了解下面几点知识： 1.首先要了解回车和换行： **换行和回车不是一个概念！**简单来说，换行是光标移动到下一行，而回车（\r）是把光标移动但当前行的最开始（行首）。 2.还需要了解缓冲区： 缓冲区分为：无缓冲、行缓冲、全缓冲。 无缓冲：是指没有缓冲，可以将信息立马显现出来。 行缓冲：是输入输出遇到换行才执行的操作。 全缓冲：是输入输出写满缓冲区才执行I/O操作。 3.了解...
微信小程序进度条样式_微信小程序-进度条-刻度
weixin_39855568的博客
12-30 1927
jsvar app = getApp()Page({data: {num:8,//这是当前有几个人jindutiao: [ //这个是进度条的标准，刻度{num:3,price:'999'},{num: 5,price: '799'},{num: 10,price: '599'}],},onLoad:function(){this.jindutiao();},jindutiao: functio...
微信小程序进度条样式_微信小程序实现流程进度的图样式功能
weixin_39753747的博客
12-20 877
最近正在做微信小程序，需要实现一个流程进度的图样式如下面需求：没完成的灰色小圆点表示完成的使用蓝色小圆点设置当前状态使用有外圈的小圆点表示实现起来比较简单，实现思路，使用一个列表实现，列表中的每一个item的样式如下图使用win10画板画的不好看图上的意思就是每个item 前面有一段线条 中间是个圆圈然后后面有一段线条。之所以这样是因为下面的文字需要居中显示在圆圈的下面。如果不需要文字的话可以一个...
【进度条】小程序的实现
m0_57018588的博客
03-17 1570
进度条小程序的实现
【微信小程序】视图组件-progress进度条组件
墨夶的博客
11-22 1390
progress组件是微信小程序中一个非常实用的组件，通过合理设置其属性和事件，可以实现多种样式的进度条效果。希望本文能帮助你在小程序开发中更好地使用progress组件。😊。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值