【快速文档】progress标签,原来小程序中有自带的进度条啊

本文介绍了小程序中内置的进度条组件progress,详细讲解了其重要参数和使用方法,包括percent、show-info等,并提供了进度条卡在98%的实现方式,通过调整参数实现动画效果和进度同步显示。同时,还提到了使用过程中的注意事项,如duration属性的设置和文字展示对进度条长度的影响。

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

介绍

这是一个进度条标签,主要用来播放进度条的动画。事实上,如果自己制作一个进度条的话,也并不算困难,不过有了现成的组件可以使用,总是更好的。

一般可以用于一些耗时的操作,增加一个进度条可以让用户耐心等待。毕竟看到了进度条在动的话,还是有所安慰的。

重要参数

percent 进度条的最终百分比,通过数字设置即可,一般可以直接设为100。

show-info 进度条增加显示百分比的文字提示

font-size 文字提示的大小,单位是px,在这里填写数字

activeColor 进度条的颜色

stroke-width 进度条的粗细

active 是否播放进度条动画,如果没有active,这个进度条不是动画,直接就满了

duration 设置动画的快慢,进度增加百分之一需要的毫秒数,注意1秒是1000毫秒

active-mode 如果设置为forwards,此时动画会继续从上次停止的位置继续播放

bindactiveend 绑定动画完成时间

简单使用

<!-- 如果设置为20,而且没动画,那么上来进度就是50 -->
<progress percent="50"></progress>
<view>===============分割线============
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值