uniapp进度条如何自定义实现

在uniapp中如何自定义进度条样式？官方提供的进度条组件样式比较单一，想实现圆形进度条、渐变色进度条或者带有动画效果的进度条，应该怎么实现？求具体实现方法或推荐插件。

2 回复

在uniapp中自定义进度条，可以使用view组件结合CSS样式实现。例如，通过外层view作为背景，内层view表示进度，动态调整内层宽度即可。代码示例：

<view class="progress-bar">
  <view class="progress" :style="{width: progress + '%'}"></view>
</view>

CSS设置背景色和高度，通过JS动态改变progress值控制进度。


在 UniApp 中，可以通过自定义组件或样式实现进度条。以下是两种常用方法：

1. 使用 View 组件模拟进度条

通过两个嵌套的 view 组件，外层作为背景，内层根据进度动态调整宽度。

示例代码：

<template>
  <view class="progress-bar">
    <view class="progress-inner" :style="{ width: progress + '%' }"></view>
  </view>
  <!-- 控制进度示例 -->
  <button @click="setProgress(80)">设置进度为80%</button>
</template>

<script>
export default {
  data() {
    return {
      progress: 30 // 初始进度30%
    }
  },
  methods: {
    setProgress(value) {
      this.progress = Math.min(100, Math.max(0, value)); // 限制范围0-100
    }
  }
}
</script>

<style>
.progress-bar {
  width: 100%;
  height: 20rpx;
  background-color: #f0f0f0;
  border-radius: 10rpx;
  overflow: hidden;
}
.progress-inner {
  height: 100%;
  background-color: #007aff;
  border-radius: 10rpx;
  transition: width 0.3s ease; /* 添加过渡动画 */
}
</style>

2. 使用第三方组件库

如使用 uView UI 等库，可直接调用封装好的进度条组件：

<u-line-progress :percentage="progress" activeColor="#ff0000"></u-line-progress>

自定义扩展建议

  • 动态颜色：通过计算属性根据进度值返回不同颜色
  • 动画效果：使用 CSS transition 或 animation
  • 文本显示：在进度条内部添加百分比文字

选择基础方案时推荐第一种，灵活可控；需要快速开发时可选用组件库。

回到顶部