Progress 进度条

用于展现某个任务的当前进度。

使用指南

在 page.json 中引入组件

  1. {
  2. "navigationBarTitleText": "Progress",
  3. "usingComponents": {
  4. "wux-white-space": "../../dist/white-space/index",
  5. "wux-button": "../../dist/button/index",
  6. "wux-progress": "../../dist/progress/index"
  7. }
  8. }

示例

  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Progress</view>
  4. <view class="page__desc">进度条</view>
  5. </view>
  6. <view class="page__bd page__bd_spacing">
  7. <view class="sub-title">Status</view>
  8. <wux-progress status="normal" percent="50" />
  9. <wux-white-space />
  10. <wux-progress status="progress" percent="50" />
  11. <wux-white-space />
  12. <wux-progress status="error" percent="50" />
  13. <wux-white-space />
  14. <wux-progress status="success" percent="50" />
  15. <view class="sub-title">ActiveColor</view>
  16. <wux-progress active-color="#11c1f3" percent="50" />
  17. <wux-white-space />
  18. <wux-progress active-color="#ffc900" percent="50" />
  19. <wux-white-space />
  20. <wux-progress active-color="#886aea" percent="50" />
  21. <view class="sub-title">BackgroundColor</view>
  22. <wux-progress background-color="#fff" percent="25" />
  23. <wux-white-space />
  24. <wux-progress background-color="#f3f3f3" percent="50" />
  25. <wux-white-space />
  26. <wux-progress background-color="#f8f8f8" percent="75" />
  27. <view class="sub-title">Shape</view>
  28. <wux-progress shape="square" percent="25" />
  29. <wux-white-space />
  30. <wux-progress shape="square" percent="50" />
  31. <wux-white-space />
  32. <wux-progress shape="square" percent="75" />
  33. <view class="sub-title">BarStyle</view>
  34. <wux-progress bar-style="background-color: #5cb85c" percent="25" />
  35. <wux-white-space />
  36. <wux-progress bar-style="background-color: #5bc0de" percent="50" />
  37. <wux-white-space />
  38. <wux-progress bar-style="background-color: #f0ad4e" percent="75" />
  39. <view class="sub-title">StrokeWidth</view>
  40. <wux-progress stroke-width="8" percent="25" />
  41. <wux-white-space />
  42. <wux-progress stroke-width="10" percent="50" />
  43. <wux-white-space />
  44. <wux-progress stroke-width="12" percent="75" />
  45. <view class="sub-title">ShowInfo</view>
  46. <wux-progress show-info percent="{{ percent }}" />
  47. <wux-progress show-info percent="{{ percent }}" />
  48. <wux-progress show-info percent="{{ percent }}" />
  49. <wux-button block type="light" bind:click="add">Add</wux-button>
  50. </view>
  51. </view>
  1. Page({
  2. data: {
  3. percent: 50,
  4. },
  5. add() {
  6. let percent = this.data.percent + 10
  7. if (this.data.percent >= 100) {
  8. percent = 0
  9. }
  10. this.setData({
  11. percent,
  12. })
  13. },
  14. })

视频演示

Progress

API

Progress props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-progress
percent number 百分比 0~100 0
strokeWidth string 进度条线的宽度,单位 px 10
activeColor string 已选择的进度条的颜色,优先级高于 status 的默认颜色 -
backgroundColor string 未选择的进度条的颜色 #f3f3f3
barStyle string,object 进度样式 -
status string 状态,可选值为 normal、progress、error、success normal
shape string 形状,可选值为 round、square round
showInfo boolean 在进度条右侧显示百分比 false

Progress externalClasses

名称 描述
wux-class 根节点样式类