progress

组件类型：UniProgressElement

进度条

progress 兼容性

Android	iOS	web
3.9	4.11	4.0

属性

名称	类型	默认值	描述
duration	number	30	进度增加1%所需毫秒数
percent	number	0	百分比0~100
show-info	boolean	false	在进度条右侧显示百分比
border-radius	number	0	圆角大小
font-size	number	16	右侧百分比字体大小
stroke-width	number	6	进度条线的宽度，单位px
activeColor	string(string.ColorString)	"#09BB07"	已选择的进度条的颜色
backgroundColor	string(string.ColorString)	"#EBEBEB"	未选择的进度条的颜色
active	boolean	false	进度条从左往右的动画
active-mode	string	"backwards"	backwards: 动画从头播；forwards：动画从上次结束点接着播
值名称 描述 backwards 动画从头播 forwards 动画从上次结束点接着播
@activeend	(event: UniProgressActiveendEvent) => void	-	动画完成事件

active-mode 兼容性

	Android	iOS	web
backwards	3.9	4.11	4.0
forwards	3.9	4.11	4.0

事件

UniProgressActiveendEvent

UniProgressActiveendEvent 的属性值

名称	类型	必填	默认值	描述
detail	UniProgressActiveendEventDetail	是	-	-
名称 类型 必备 默认值 描述 curPercent number 是 - -
bubbles	boolean	是	-	是否冒泡
cancelable	boolean	是	-	是否可以取消
type	string	是	-	事件类型
target	UniElement | null	否	-	UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
currentTarget	UniElement | null	否	-	UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
timeStamp	number	是	-	事件发生时的时间戳

UniProgressActiveendEvent 的方法

名称	类型	必填	默认值	描述
stopPropagation	() => void	是	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	阻止当前事件的默认行为

progress 属性兼容性

	Android	iOS	web
duration	3.9	4.11	4.0
percent	3.9	4.11	4.0
show-info	3.9	4.11	4.0
border-radius	3.9	4.11	x
font-size	3.9	4.11	x
stroke-width	3.9	4.11	4.0
activeColor	3.9	4.11	4.0
backgroundColor	3.9	4.11	4.0
active	3.9	4.11	4.0
active-mode	3.9	4.11	4.0
@activeend	3.9	4.11	x

示例

hello uni-app x

Template

Script

<template>
  <view class="main">
    <progress :duration="duration_input" :percent="percent_input" :show-info="show_info_boolean"
      :stroke-width="stroke_width_input" :activeColor="activeColor_input" :backgroundColor="backgroundColor_input"
      :active="active_boolean" :active-mode="active_mode_enum[active_mode_enum_current].name"
      @touchstart="progress_touchstart" @touchmove="progress_touchmove" @touchcancel="progress_touchcancel"
      @touchend="progress_touchend" @tap="progress_tap" style="width: 80%">
      <text>uni-app-x</text>
    </progress>
  </view>

  <scroll-view style="flex: 1">
    <view class="content">
      <page-head title="组件属性"></page-head>
      <boolean-data :defaultValue="false" title="进度条从左往右的动画" @change="change_active_boolean"></boolean-data>
      <boolean-data :defaultValue="false" title="在进度条右侧显示百分比" @change="change_show_info_boolean"></boolean-data>
      <input-data defaultValue="30" title="进度增加1%所需毫秒数" type="number" @confirm="confirm_duration_input"></input-data>
      <input-data defaultValue="0" title="百分比0~100" type="number" @confirm="confirm_percent_input"></input-data>
      <input-data defaultValue="6" title="进度条线的宽度，单位px" type="number"
        @confirm="confirm_stroke_width_input"></input-data>
      <input-data defaultValue="#09BB07" title="已选择的进度条的颜色" type="text"
        @confirm="confirm_activeColor_input"></input-data>
      <input-data defaultValue="#EBEBEB" title="未选择的进度条的颜色" type="text"
        @confirm="confirm_backgroundColor_input"></input-data>
      <enum-data :items="active_mode_enum" title="backwards: 动画从头播；forwards：动画从上次结束点接着播"
        @change="radio_change_active_mode_enum"></enum-data>
    </view>

    <view>
      <page-head title="默认及使用"></page-head>
      <view class="uni-padding-wrap uni-common-mt">
        <view class="progress-box">
          <progress :percent="pgList[0]" :active="true" :border-radius="borderRadius" :show-info="showInfo"
            :font-size="fontSize" :stroke-width="strokeWidth" :background-color="backgroundColor" class="progress p"
            @activeend="activeend" />
        </view>
        <view class="progress-box">
          <progress :percent="pgList[1]" :stroke-width="3" class="progress p1" />
        </view>
        <view class="progress-box">
          <progress :percent="pgList[2]" :stroke-width="3" class="progress p2" />
        </view>
        <view class="progress-box">
          <progress :percent="pgList[3]" activeColor="#10AEFF" :stroke-width="3" class="progress p3" />
        </view>
        <view class="progress-control">
          <button type="primary" @click="setProgress" class="button">
            设置进度
          </button>
          <button type="warn" @click="clearProgress" class="button">
            清除进度
          </button>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<style>
  .main {
    max-height: 250px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-direction: row;
    justify-content: center;
  }

  .main .list-item {
    width: 100%;
    height: 100px;
    border: 1px solid #666;
  }

  .progress-box {
    height: 25px;
    margin-bottom: 30px;
  }

  .button {
    margin-top: 10px;
  }
</style>

参见

• 参见uni-app相关文档
• 参见uni-app x相关文档
• 相关 Bug