uni-app 实现百分比比例条插件类似于进度条

一条进度条显示两个不同的颜色比例

在uni-app中实现一个百分比比例条插件，你可以使用Vue.js和uni-app的组件机制来创建一个自定义进度条组件。以下是一个简单的实现示例，展示如何创建一个百分比比例条插件。

首先，创建一个名为ProgressBar.vue的组件文件：

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

<script>
export default {
  name: 'ProgressBar',
  props: {
    progress: {
      type: Number,
      required: true,
      validator: value => value >= 0 && value <= 100
    }
  }
}
</script>

<style scoped>
.progress-bar-container {
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 20px;
  background-color: #76c7c0;
  text-align: center;
  line-height: 20px;
  color: white;
  border-radius: 4px;
}

.progress-text {
  font-size: 14px;
}
</style>

然后，在你的页面文件中使用这个组件。例如，在pages/index/index.vue中：

<template>
  <view>
    <ProgressBar :progress="currentProgress" />
    <button @click="increaseProgress">增加进度</button>
    <button @click="resetProgress">重置进度</button>
  </view>
</template>

<script>
import ProgressBar from '@/components/ProgressBar.vue';

export default {
  components: {
    ProgressBar
  },
  data() {
    return {
      currentProgress: 0
    };
  },
  methods: {
    increaseProgress() {
      if (this.currentProgress < 100) {
        this.currentProgress += 10;
      }
    },
    resetProgress() {
      this.currentProgress = 0;
    }
  }
}
</script>

<style scoped>
/* 页面样式可以根据需要调整 */
</style>

在这个示例中，ProgressBar组件接收一个progress属性，该属性是一个0到100之间的数字，表示进度条的百分比。页面中使用该组件，并通过按钮点击事件来增加或减少进度。

你可以根据具体需求调整样式和功能，比如添加动画效果、不同的颜色主题等。这个基础示例提供了一个简单的框架，可以在此基础上进行扩展和优化。

uni-app 实现百分比比例条插件 类似于进度条

uni-app 实现百分比比例条插件类似于进度条