全部产品

progress 进度条

扫码体验

image.png

示例代码

<!-- API-DEMO page/component/progress.axml -->
<view class="page">
  <view class="page-description">进度条</view>
  <view class="page-section">
    <view class="page-section-demo">
      <progress percent="20" show-info/>
      <progress percent="40" active/>
      <progress percent="60" stroke-width="10"/>
      <progress percent="80" color="#10AEFF"/>
      <progress percent="80" activeColor="#6abf47" backgroundColor="#f4333c" />
    </view>
  </view>
</view>
// API-DEMO page/component/progress.js
Page({});
/* API-DEMO page/component/progress.acss */
progress{
  margin-bottom: 60rpx;
}

属性

属性名类型默认值描述
percentFloat-百分比(0~100)
show-infoBooleanfalse在右侧显示百分比值
stroke-widthNumber6线的粗细,单位 px
active-colorColor#09BB07已选择的进度条颜色
background-colorColor-未选择的进度条颜色
activeBooleanfalse是否添加从0%开始加载的入场动画