介绍
这是一个进度条标签,主要用来播放进度条的动画。事实上,如果自己制作一个进度条的话,也并不算困难,不过有了现成的组件可以使用,总是更好的。
一般可以用于一些耗时的操作,增加一个进度条可以让用户耐心等待。毕竟看到了进度条在动的话,还是有所安慰的。
重要参数
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>===============分割线===============</view>
<!-- 通过stroke-width和activeColor可以让进度条变的不一样 -->
<progress percent="100" activeColor="black" stroke-width="100"></progress>
<view>===============分割线===============</view>
<!-- 添加show-info和font-size可以设置文字

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

被折叠的 条评论
为什么被折叠?



