uniapp 进度条如何实现

在uniapp中如何实现一个进度条组件？我需要在页面上展示任务或下载的进度，但不知道具体该用什么组件或方法。uni-ui里好像没有专门的进度条组件，是用progress标签还是需要自己写样式实现？如果要自定义样式，比如修改颜色、圆角或添加动画效果，应该怎么操作？希望有经验的开发者能分享下具体实现方案和代码示例。

2 回复

在uni-app中，可以使用<progress>组件实现进度条。例如：

<progress percent="50" show-info stroke-width="6" />

属性说明：

  • percent：进度百分比
  • show-info：是否显示进度值
  • stroke-width：进度条宽度

也可使用uni.showLoading()显示加载动画，或用CSS自定义样式实现更复杂效果。


在 UniApp 中，可以通过以下方式实现进度条：

1. 使用内置组件 <progress>

<template>
  <view>
    <progress 
      percent="50" 
      show-info 
      stroke-width="6"
      active-color="#007AFF"
    />
  </view>
</template>

属性说明：

  • percent：进度百分比（0-100）
  • show-info：是否显示进度值
  • stroke-width：进度条宽度
  • active-color：进度条颜色

2. 动态进度条实现

<template>
  <view class="container">
    <progress 
      :percent="progress" 
      show-info 
      stroke-width="8"
      active-color="#4CD964"
    />
    <button @click="startProgress">开始进度</button>
    <button @click="resetProgress">重置</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      progress: 0,
      timer: null
    }
  },
  methods: {
    startProgress() {
      this.timer = setInterval(() => {
        if (this.progress < 100) {
          this.progress += 10
        } else {
          clearInterval(this.timer)
        }
      }, 500)
    },
    resetProgress() {
      clearInterval(this.timer)
      this.progress = 0
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

3. 自定义进度条（使用 View 组件）

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

<script>
export default {
  data() {
    return {
      progress: 30
    }
  }
}
</script>

<style>
.progress-container {
  display: flex;
  align-items: center;
  margin: 20rpx;
}

.progress-bg {
  flex: 1;
  height: 20rpx;
  background-color: #f0f0f0;
  border-radius: 10rpx;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #007AFF, #4CD964);
  border-radius: 10rpx;
  transition: width 0.3s ease;
}

.progress-text {
  margin-left: 20rpx;
  font-size: 28rpx;
  color: #666;
}
</style>

使用场景建议：

  • 简单场景：使用内置 <progress> 组件
  • 需要自定义样式：使用 View 自定义实现
  • 动态更新：结合数据绑定和定时器实现

以上方法在 UniApp 中都能正常工作，可根据具体需求选择合适的方式。

回到顶部