进度条组件

progress 组件是 Uniapp 中用于显示进度条的核心组件，通常用于展示操作的进度（如文件上传、下载、数据加载等）。开发者可以通过 percent 属性动态控制进度条的进度，并通过 active 属性为进度条添加动画效果，提升用户体验。

1. 什么是 progress 组件？

progress 组件用于展示操作的完成进度，通常以百分比的形式显示。它在任务处理、文件传输、数据加载等场景中非常常见，能够直观地展示进度完成情况。开发者可以通过设置不同的属性，定制进度条的外观和行为。

使用场景

• 文件上传/下载进度：展示文件传输过程中已完成的百分比。
• 加载条：在数据加载或操作处理中展示当前进度。
• 步骤进度：用于展示多步骤任务的完成情况，例如表单或任务的执行状态。

2. progress 组件的常用属性

progress 组件提供了一些常用的属性，开发者可以通过这些属性设置进度条的外观和行为：

属性名	类型	默认值	说明	平台差异说明
percent	Number	无	进度百分比，范围为 0 到 100	无
show-info	Boolean	false	是否在进度条右侧显示百分比	无
border-radius	Number/String	0	进度条的圆角大小，单位可以是 px 或 rpx	部分平台不支持
font-size	Number/String	16	右侧百分比的字体大小，单位为 px	部分平台不支持
stroke-width	Number	6	进度条线的宽度，单位为 px	无
activeColor	Color	#09BB07	已选择的进度条部分的颜色	无
backgroundColor	Color	#EBEBEB	未选择的进度条部分的颜色	无
active	Boolean	false	进度条是否具有从左到右的动画效果	无
active-mode	String	backwards	动画模式，backwards 表示动画从头播放，forwards 表示动画从上次进度接着播放	部分平台不支持
duration	Number	30	每增加 1% 进度所需的时间，单位为毫秒	部分平台不支持
@activeend	EventHandle	无	动画完成时触发的事件	部分平台不支持

2.1 active 属性与 active-mode

• active：当设置为 true 时，进度条将从左到右播放动画。
• active-mode：控制动画的播放方式，有两个值：
  • backwards：动画从 0 开始播放。
  • forwards：动画从上次停止的位置接着播放。

3. 带动画的进度条

以下案例展示了如何使用 progress 组件实现带有动画的进度条，并通过按钮动态设置和清除进度。

<template>
  <view class="container">
    <!-- 动态进度条，展示动画效果 -->
    <progress :percent="percent" show-info active activeColor="#4CAF50" backgroundColor="#EBEBEB" stroke-width="8"></progress>

    <!-- 控制进度条的按钮 -->
    <view class="progress-control">
      <button type="primary" @click="startProgress">开始进度</button>
      <button type="warn" @click="resetProgress">重置进度</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 定义一个进度状态
const percent = ref(0)

// 逐步增加进度的函数
const startProgress = () => {
  percent.value = 0 // 每次开始前重置进度条
  const interval = setInterval(() => {
    if (percent.value >= 100) {
      clearInterval(interval) // 进度达到100%时，停止增加
    } else {
      percent.value += 5 // 每次增加5%的进度
    }
  }, 300) // 每300ms增加一次进度
}

// 重置进度条
const resetProgress = () => {
  percent.value = 0
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.progress-control {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

button {
  margin: 0 10px;
}
</style>

代码解析

1. 进度条动态变化：
   • percent 使用 ref 定义初始值为 0，表示进度条的当前百分比。
   • startProgress 函数通过 setInterval 每隔 300 毫秒增加 5% 的进度，直到进度达到 100%，并清除计时器。
   • resetProgress 函数将进度重置为 0。
2. progress 组件：
   • percent 属性绑定动态进度值，显示当前的进度百分比。
   • active 属性用于启用进度条从左向右的动画效果，activeColor 控制进度条完成部分的颜色。
3. 按钮交互：
   • 点击 "开始进度" 按钮触发 startProgress，进度条从 0% 动态增加到 100%。
   • 点击 "重置进度" 按钮调用 resetProgress，将进度条重置到 0%。