支付宝小程序基础组件 进度条·Progress

2020-09-18 11:07 更新

当页面在请求数据过程中,会出现信息读取的进度过程。

扫码体验

示例代码

  1. <!-- API-DEMO page/component/progress.axml -->
  2. <view class="page">
  3. <view class="page-description">进度条</view>
  4. <view class="page-section">
  5. <view class="page-section-demo">
  6. <progress percent="20" show-info/>
  7. <progress percent="40" active/>
  8. <progress percent="60" stroke-width="10"/>
  9. <progress percent="80" active-Color="#6abf47" backgroundColor="#f4333c" />
  10. </view>
  11. </view>
  12. </view>
  13. // API-DEMO page/component/progress.js
  14. Page({});
  15. /* API-DEMO page/component/progress.acss */
  16. progress{
  17. margin-bottom: 60rpx;
  18. }

属性

属性名 类型 默认值 描述 最低版本
percent Float - 百分比(0~100)。 -
show-info Boolean show-info="{{false}}" 在右侧显示百分比值。 -
stroke-width Number 6 线的粗细,单位 px。 -
active-color Color #09BB07 已选择的进度条颜色。 -
background-color Color - 未选择的进度条颜色。 -
active Boolean active="{{false}}" 是否添加从0%开始加载的入场动画。 -
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号