uni-app progress 组件使用详解

予你@。2026-02-15 14:14

在 uni-app 开发中，progress 组件常用于展示任务加载进度，例如文件上传、页面初始化加载、下载进度等。该组件使用简单、样式灵活，并支持动态绑定进度值。

本文将详细介绍 progress 组件的常见用法及完整示例。

一、基础用法

最简单的使用方式如下：

html 复制代码

<progress :percent="myPercent" activeColor="#007AFF" stroke-width="12rpx" />

export default {
    data() {
        return {
            myPercent: 50
        }
    }
}

说明：

percent：进度值，范围 0 ~ 100
activeColor：已完成进度颜色
stroke-width：进度条高度

二、常用属性说明

属性	类型	说明
percent	Number	进度百分比
activeColor	String	已完成颜色
backgroundColor	String	未完成颜色
stroke-width	Number / String	进度条宽度
show-info	Boolean	是否显示百分比文本
active	Boolean	是否显示动画

示例：

html 复制代码

<progress
    :percent="myPercent"
    active
    show-info
    activeColor="#007AFF"
    backgroundColor="#eee"
    stroke-width="16rpx"
/>

三、实现动态加载进度（模拟加载）

实际项目中，进度通常是动态变化的，例如 3 秒加载完成：

html 复制代码

<template>
    <view>
        <progress :percent="myPercent" active stroke-width="12rpx" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            myPercent: 0
        }
    },
    onLoad() {
        let timer = setInterval(() => {
            if (this.myPercent >= 100) {
                clearInterval(timer)
            } else {
                this.myPercent += 2   // 每次增加2%
            }
        }, 60) // 约3秒完成
    }
}
</script>

这样即可实现更真实的加载动画效果。

四、常见使用场景

progress 组件常用于：

页面初始化加载
文件上传进度
下载进度显示
视频缓存进度
任务执行进度提示

例如：

html 复制代码

<progress :percent="uploadPercent" activeColor="#4CD964" />

五、开发建议

在真实业务中，推荐：

进度值绑定真实接口返回
在进度到 100% 时触发下一步操作
对加载时间较短的接口，可使用 假进度动画 + 完成校正

例如：

复制代码

if(realProgress > myPercent){
    myPercent = realProgress
}

可避免进度条卡顿。

六、总结

progress 是 uni-app 中非常常用的展示组件，具有：

使用简单
支持动态更新
跨端兼容
样式灵活