主要是针对投票详情这个需求进行封装，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 前面加上：然后再附上变量
