主要是针对投票详情这个需求进行封装，uniapp官方实例中没有进度条；如果不需要显示总数（总票数，可以不绑定这个字段值）；效果图如下：
下面看一下实现的代码部分。
1 、在comonents文件下创建一个uni-progress.vue的文件
<template> <view class="uni-progress-box"> <!-- 进度条底层 --> <view class="progress-bottom"> <!-- 进度条实际 --> <view class="progress" :style="{width:percentage+'%', background:percentBackground}"></view> </view> <!-- 实际进度条占比 --> <view class="percentage"> {{ percentage }} % </view> <!-- 如果是投票模式，显示投票总数 --> <view v-if="explain">{{ explain }}</view> </view> </template>
<script> export default { props:{ // 进度条占比 percentage:{ type: Number, default: 0 }, // 如果是投票模式，已投得票数 explain:{ type: [Number,String], default: '0票' }, // 进度条占比的颜色设置 percentBackground:{ type: String, default: null } }, data() { return { }; } } </script>
<style scoped lang="scss"> .uni-progress-box{ display: flex; // 进度条底层样式 .progress-bottom{ margin-top:20upx; height: 16upx; width: 70%; background: #ccc; border-radius: 20upx; // 进度条占比样式 .progress{ height: 16upx; border-radius: 20upx; } } // 已占比的进度条样式 .percentage{ margin:0 4%; } } </style>
2 去需要引用进度条的界面，进行引用
import uniProgress from '../../../../components/uni-progress.vue' export default { components:{ uniProgress },
}
在视图部分使用组件
<uniProgress :percentage="60" explain="6票" percentBackground="#007aff"></uniProgress> <uniProgress :percentage="20" explain="2票" percentBackground="red"></uniProgress> <uniProgress :percentage="20" explain="2票" percentBackground="yellow"></uniProgress>
作为动态获取的数据，我们需要在 explain percentage percentBackground 前面加上：然后再附上变量
