【微信小程序】组件（五）progress

最新推荐文章于 2024-06-21 11:55:31 发布

Crab0314

最新推荐文章于 2024-06-21 11:55:31 发布

阅读量6.1k

点赞数 1

分类专栏：微信小程序开发文章标签：微信小程序 javascript progress组件

本文链接：https://blog.csdn.net/Crab0314/article/details/78158084

版权

本文介绍了微信小程序中Progress组件的使用，通过四个不同的示例展示了如何设置百分比、显示进度信息、调整进度条宽度及颜色，以及实现动态显示效果。详细介绍了show-info、stroke-width、color和active等属性的用法。

摘要由CSDN通过智能技术生成

记录一个关于progress组件的demo，先看下效果↓

1.附上wxml代码 ↓

<progress class="usual_progress" percent="20" show-info />
<progress class="usual_progress" percent="40" stroke-width="12" />
<progress class="usual_progress" percent="60" color="pink" />
<progress class="usual_progress" percent="80" active />

usual_progress代码如下↓

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Crab0314

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

微信小程序组件—progress(进度条)

qq_39702981的博客

11-29

1万+

progress 进度条。属性名类型默认值说明最低版本 percent Float 无百分比0~100 show-info Boolean false 在进度条右侧显示百分比 border-radius Number / String 0 圆角大小，单位px（2.4.0起支......

vue中进度条写法_vue中H5的progress标签仿写一个进度条和逻辑

weixin_39957805的博客

12-30

360

要求：*载入：0~5秒，每秒增加8%进度；5~10秒，每秒增加4%进度；10~20秒，每秒增加2%进度；超过20秒，每秒增加0.2%进度，最多不超过95%*data(){return{progressValue: 0,}}methods：{// 进度条的控制getProgress() {let num = 0;let progress = 0.0;this.firstTime = setInter...

参与评论您还未登录，请先登录后发表或查看评论

一个只需要一行代码即可调出的 Progress，高度定制

weixin_34066347的博客

06-23

264

FuckProgress, Talk is Cheap, Show me the code ! Turaiiao/FuckProgress FuckProgress(this).light("Loading...") FuckProgress(this).dark("Loading...") 复制代码使用方法见 github，支持三种默认主题，欢迎给个 star ！转载于:https:/...

微信小程序简单实现进度条Progress

最新发布

jinaiminm的博客

06-21

202

先看效果：我是看了vant weApp的progress，而且我这边需求不多只需要实现进度条让用户看到就可以，我自己写了一个模拟数据:我认为需求不多，自己使用普通标签就可以实现，在这里zongf是我要显示的长度，为什么要设置小数点呢，因为我给的长度是100%，max-width也是100%，显示的区域最大是100%，长度可以自己设置哈，我是觉得css挺有意思的，本人是小菜鸡，只是想分享自己的感受，如有不足，请大佬多多指教，谢谢

微信小程序进度条Progress

qq_45973003的博客

05-17

2094

// 现在的话就是讲解我门的微信小程序进度条的基础：然后的户就是在我们的微信wxml中编写我们的相关的网页文件的代码：  <view class="peogress-precent"> 我们的微信小程序的进度条控件使用的是porecent百分比。 </view> <view class="progress-box"> <!-- 在我们的这个位置的话就是设置我么的相关的widt

progress组件（进度条）

weixin_30432579的博客

05-20

1679

　　progress组件：进度条 　　progress组件的属性：　　　　percent：类型：number　　设置百分比（0~100）　　　　show-info：类型：布尔　　在进度条右侧显示百分比　　　　border-radius：类型：number　　圆角大小　　　　font-size：类型：number　　右侧百分比字体大小　　　　stroke-width：类型：n...

微信小程序 进度条 宽度对比

fqfq123456的专栏

09-03

518

有时进度条宽了不好看 <progressclass="jindu"percent="80"color="#0af"stroke-width="3"></progress> <viewclass="brcj"> <viewclass="wcs"> <imageclass="chjimage"src="./../images/myicon/tians.png"...

微信小程序 progress组件详解及实例代码

09-01

微信小程序的Progress组件是用于展示进度的控件，它能够以直观的方式呈现任务或数据加载的完成程度。在本文中，我们将深入探讨Progress组件的主要属性、应用场景以及如何通过实例代码来实现不同的效果。首先，...

微信小程序progress组件使用详解

08-28

微信小程序progress组件使用详解 微信小程序progress组件是一个非常实用的组件，可以用来展示进度条，例如下载进度、任务进度等。下面我们将详细介绍微信小程序progress组件的使用。首先，progress组件有多个属性...

基于canvas 2D实现微信小程序自定义组件-环形进度条

06-11

在微信小程序开发中，自定义组件是提升代码复用性和应用可维护性的重要手段。本教程将探讨如何利用canvas 2D API来实现一个高效、可定制的环形进度条自定义组件。Canvas 2D 提供了一套丰富的绘图接口，让我们能够...

微信小程序仪表盘组件带刻度进度

03-18

在微信小程序中，我们可以自定义创建这样的组件，或者利用官方提供的`progress`组件进行改造。下面我们将详细讨论如何实现这一功能。首先，我们需要了解微信小程序中的`progress`组件。这个组件是微信小程序内置的...

微信小程序----自定义进度条（节点）

weixin_43373654的博客

01-26

2495

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

微信小程序全栈开发实战学习三（icon组件关于图标的5个实现方案+progress组件如何自定义实现一个环形进度条？）

weixin_37365539的博客

05-27

391

icon组件关于图标的5个实现方案. 小程序官方提供icon很少，支持两种单位 px rpx 我们可以用以下5个方案来使用图标 1. 使用图片缺点：图标多会造成大量http请求；不方便修改颜色；图标放大会变虚 2. 使用精灵图（连续图片集）注意：背景图片只能使用网络图片，不能使用本地图片. 3.使用css样式绘制（不推荐） 4.使用矢量字体（最为简单有效）注意：小程序中建议使用TTF和WOFF格式的。WOFF2在低版本的IOS上会有不兼容的问题。具体方法：（这里推荐阿里巴巴矢量图库）可以前

微信小程序学习（六）之progress组件

海阳之新's blog

12-01

702

一、效果二、代码学习progress组件 2016/12/01 vsiryxm@qq.com 1、show-info属性用来定义在右侧是否显示百分比数字。 2、stroke-width属性用来定义进度条线条宽度。 3、color属性用来定义进度条的前景色的颜色。 4、active属性用来定义进度条的动画效果。 \

微信小程序全栈开发实践第二章 微信小程序组件介绍及使用 -- 2.2 progress组件，以及如何自定义实现一个环形进度条？

weixin_42580704的博客

07-12

971

在前端网络操作是异步的，一般都需要一个进度条，在很多应用中，我们经常可以看到环形进度条。但是小程序原生的progress组件，是一个从左到右的方形进度条，那么我们可不可以自实现一个环形进度条呢？一、原生实例代码可自定义的属性有关于颜色值的，颜色的使用需要符合微信小程序设计规范 https://developers.weixin.qq.com/miniprogram/design/ index.wxml  <view class="gap" &

Android进度条ProgressBar使用详解

热门推荐

小旭的专栏

01-16

2万+

先介绍一下ProgressBar几种比较常用的属性布局中设置： android:max="100" ——最大显示进度 android:progress="50"——第一显示进度 android:secondaryProgress="80"——第二显示进度 android:indeterminate="true"——设置是否精确显示，true表示不精确显示进度，false表示精确显示进度 ...

[Android ] 进度条组件ProgressBar

sam___1的博客

04-18

4624

ProgressBar（进度条），通常用于向用户显示某个耗时操作完成的百分比。因此它需要动态地显示进度，从而避免长时间地执行某个耗时的操作，而让用户感觉程序失去了响应，从而提高界面的友好性。 1.ProgressBar的属性 android:animationResolution：超时的动画帧之间的毫秒；必须是一个整数值，如“100”。 android:indeterminate：是否允许使用不确定模式，在不确定模式下，进度条动画无限循环 android:indeterminateBehavior：.

Vue2进度条（Progress）

Mr Dear的博客

04-08

2万+

可自定义设置以下属性： 进度条总宽度（width），默认600px 当前进度（progress），默认36 进度条线的宽度（strokeWidth），默认8px 是否显示进度数值或状态图标（showInfo），默认true

小程序Progress组件介绍

m0_60107460的博客

11-17

1796

小程序Progress组件介绍官方文档 进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。属性 小程序所有可视的组件都可以绑定tap事件bindtap，即使没有在属性里面显示的标明。 小程序中Boolean属性如果为真则只需要写上属性名就好了，如果要设置成假，则需要写成属性名=“false”。属性类型默认值必填说明 percent number 否百分比0~100 show-info boolean false 否在进度条右侧显示

微信小程序组件progress

06-08

微信小程序组件 `progress` 可以用来展示一个进度条，常用于展示任务进度或者数据加载进度等。它有以下属性： - `percent`: 进度百分比，取值范围为 0~100。 - `show-info`: 是否展示进度条右侧的百分比数字和描述文字，默认为 false。 - `border-radius`: 进度条的圆角大小，默认为 0。 - `font-size`: 百分比数字的字体大小，默认为 16rpx。 - `stroke-width`: 进度条的线条宽度，默认为 6rpx。 - `active-color`: 已完成部分的颜色，默认为 `#09BB07`。 - `background-color`: 未完成部分的颜色，默认为 `#EBEBEB`。 - `active`: 是否启用进度条动画，默认为 false。使用示例： ```html <progress percent="{{percent}}" show-info active></progress> ``` 其中 `percent` 可以通过数据绑定来动态设置，`show-info` 和 `active` 是可选属性。