uniapp之封装横向进度条

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