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

news2025/6/1 6:27:10

使用 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>