微信小程序内容组件 progress

progress

基础库 1.0.0 开始支持,低版本需做兼容处理。

进度条。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

属性 类型 默认值 必填 说明 最低版本
percent number 百分比0~100 1.0.0
show-info boolean false 在进度条右侧显示百分比 1.0.0
border-radius number/string 0 圆角大小 2.3.1
font-size number/string 16 右侧百分比字体大小 2.3.1
stroke-width number/string 6 进度条线的宽度 1.0.0
color string #09BB07 进度条颜色(请使用activeColor) 1.0.0
activeColor string #09BB07 已选择的进度条的颜色 1.0.0
backgroundColor string #EBEBEB 未选择的进度条的颜色 1.0.0
active boolean false 进度条从左往右的动画 1.0.0
active-mode string backwards backwards: 动画从头播;forwards:动画从上次结束点接着播 1.7.0
duration number 30 进度增加1%所需毫秒数 2.8.2
bindactiveend eventhandle 动画完成事件 2.4.1

示例代码

<view class="progress-box">
  <progress percent="20" show-info stroke-width="3"/>
</view>

<view class="progress-box">
  <progress percent="40" active stroke-width="3" />
  <icon class="progress-cancel" type="cancel"></icon>
</view>

<view class="progress-box">
  <progress percent="60" active stroke-width="3" />
</view>

<view class="progress-box">
  <progress percent="80" color="#10AEFF" active stroke-width="3" />
</view>

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《微信小程序内容组件 progress》
文章链接:https://zhuji.vsping.com/311125.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。