当前位置：首页 > news >正文

鸿蒙OSUniApp 制作自定义的进度条组件#三方框架 #Uniapp

news 来源：原创 2025/6/20 1:27:39

使用 UniApp 制作自定义的进度条组件

在移动应用开发中，进度条是非常常见的 UI 组件，无论是文件上传、下载、任务进度还是表单填写反馈，进度条都能为用户提供直观的进度提示。虽然 UniApp 提供了一些基础的进度条能力，但在实际项目中，我们往往需要更灵活、更美观的自定义进度条。本文将详细介绍如何在 UniApp 中手写一个可复用、可定制的进度条组件，并结合实际案例进行讲解。

为什么要自定义进度条？

虽然 UniApp 的 uni-progress 组件可以满足基础需求，但在以下场景下自定义进度条更有优势：

需要特殊的样式（如渐变色、圆角、动画等）；
需要在进度条上显示自定义内容（如百分比、图标、状态文字等）；
需要支持多种主题或适配不同的产品风格；
需要更复杂的交互（如点击、拖拽调整进度等）。

自定义进度条不仅能提升产品的视觉体验，还能增强用户的操作感知。

组件设计思路

在设计自定义进度条组件时，我们需要考虑以下几点：

可配置性：支持自定义颜色、高度、圆角、动画、显示内容等；
响应式：进度变化时能平滑过渡，适配不同屏幕尺寸；
易用性：对外暴露简单明了的 props，方便父组件传参；
可扩展性：后续可以方便地增加新功能，如分段进度、状态切换等。

组件实现

我们以一个横向进度条为例，支持自定义颜色、进度、显示百分比、圆角和动画。

1. 组件结构

在 components/progress-bar/progress-bar.vue 下新建组件：

<template><view class="progress-bar-container" :style="containerStyle"><view class="progress-bar-bg" :style="bgStyle"><view class="progress-bar-inner" :style="innerStyle"><text v-if="showText" class="progress-bar-text">{{ displayText }}</text></view></view></view>
</template><script>
export default {name: 'ProgressBar',props: {percent: {type: Number,default: 0},height: {type: String,default: '16px'},bgColor: {type: String,default: '#f5f5f5'},barColor: {type: String,default: 'linear-gradient(90deg, #4facfe 0%, #00f2fe 100%)'},borderRadius: {type: String,default: '8px'},showText: {type: Boolean,default: true},textColor: {type: String,default: '#333'},textInside: {type: Boolean,default: true},animation: {type: Boolean,default: true}},computed: {containerStyle() {return {width: '100%',height: this.height};},bgStyle() {return {width: '100%',height: '100%',background: this.bgColor,borderRadius: this.borderRadius,overflow: 'hidden',position: 'relative'};},innerStyle() {return {width: `${Math.min(this.percent, 100)}%`,height: '100%',background: this.barColor,borderRadius: this.borderRadius,display: 'flex',alignItems: 'center',justifyContent: this.textInside ? 'center' : 'flex-end',color: this.textColor,transition: this.animation ? 'width 0.5s cubic-bezier(0.4,0,0.2,1)' : 'none',position: 'relative'};},displayText() {return `${Math.round(this.percent)}%`;}}
};
</script><style scoped>
.progress-bar-container {width: 100%;
}
.progress-bar-bg {width: 100%;background: #f5f5f5;position: relative;
}
.progress-bar-inner {min-width: 24px;box-sizing: border-box;font-size: 14px;white-space: nowrap;transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.progress-bar-text {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);font-size: 14px;color: inherit;
}
</style>

2. 组件使用示例

在页面中引用并使用自定义进度条组件：

<template><view class="demo-progress"><progress-bar :percent="progress" barColor="#42d392" height="20px" /><progress-bar :percent="progress" barColor="linear-gradient(90deg, #ff5858 0%, #f09819 100%)" height="18px" :showText="true" /><progress-bar :percent="progress" barColor="#007aff" :showText="false" height="12px" /><button @click="increase">增加进度</button></view>
</template><script>
import ProgressBar from '@/components/progress-bar/progress-bar.vue';export default {components: { ProgressBar },data() {return {progress: 30};},methods: {increase() {this.progress = Math.min(this.progress + 10, 100);}}
};
</script><style>
.demo-progress {padding: 32rpx;
}
button {margin-top: 24rpx;
}
</style>