更新记录

1.0.0（2023-03-24） 下载此版本

增加了线条进度图，优化了代码，增加可以传入的delay参数单位为毫秒

平台兼容性

luanqing-progressbar

圆环进度条、长条进度条、时间计时器、条形进度条、圆形进度条

圆环进度条可以添加自定义视图

特别说明：为了兼容app h5 请在App.vue文件添加

<style>
    @keyframes progross1 {
        to {
            transform: rotate(360deg);
        }
    }
    @keyframes progross2 {
        to {
            transform: rotate(0deg);
        }
    }
</style>

方法说明

参数说明

示例代码

<template>
    <view class="uni_flex_col_align_center" style="height: 750rpx;">

        <!-- 圆环进度条 -->
        <luanqing-progressbar 
            v-if="showMode === 'ring'"
            ref="ringProgressBar" 
            active-color="#E00300" 
            default-color="#ACACAC"     
            mode="ring" 
            :border="30" 
            :ringSize="220" 
            :deley="2500">
            <view>
                自定义内容
            </view>
        </luanqing-progressbar>

        <view v-if="showMode === 'ring'" class="uni_flex_row_between_center mt30">
            <view @click="start" class="button red">开始</view>
            <view @click="stop" class="button red">停止</view>
        </view>

        <view v-if="showMode === 'ring'" class="uni_flex_row_between_center mt5" style="margin-bottom: 128rpx;">
            <view @click="pause" class="button blue">暂停</view>
            <view @click="resume" class="button blue">恢复</view>
        </view>

        <!-- 长条进度条 -->
        <luanqing-progressbar
            v-if="showMode === 'line'"
            ref="lineProgressBar" 
            active-color="#E00300" 
            default-color="#ACACAC"     
            mode="line"
            :lineProgressBarWidth="600"
            :lineProgressBarHeight="30" 
            :lineProgressBarRadius="20"
            >
        </luanqing-progressbar>

        <view v-if="showMode === 'line'" class="uni_flex_row_between_center mt20">
            <view @click="start(25)" class="button red">25%</view>
            <view @click="start(50)" class="button red">50%</view>
            <view @click="start(75)" class="button red">75%</view>
            <view @click="start(100)" class="button red">100%</view>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 显示哪个类型的进度条   ring圆环  line长条
                showMode: 'ring' , 
            }
        },
        onReady() {
            if(this.showMode === 'ring'){
                uni.setNavigationBarTitle({
                    title:'圆环进度条 定时器'
                });
            }else{
                uni.setNavigationBarTitle({
                    title:'线条、长条进度条'
                });
            }
        },
        methods: {
            // 开始
            start(progress){
                if(this.showMode === 'ring'){
                    this.$refs.ringProgressBar.start();
                }else{
                    this.$refs.lineProgressBar.start(progress);
                }
            },
            // 停止
            stop(){
                if(this.showMode === 'ring'){
                    this.$refs.ringProgressBar.stop();
                }else{
                    this.$refs.lineProgressBar.stop();
                }
            },
            // 暂停
            pause(){
                if(this.showMode === 'ring'){
                    this.$refs.ringProgressBar.pause();
                }else{
                    this.$refs.lineProgressBar.pause();
                }
            },
            // 恢复
            resume(){
                if(this.showMode === 'ring'){
                    this.$refs.ringProgressBar.resume();
                }else{
                    this.$refs.lineProgressBar.resume();
                }
            }
        }
    }
</script>

<style>
.button{
    margin: 20rpx;
    width: 100rpx;
    color: #ffffff;
    font-size: 30rpx;
    padding: 8rpx 20rpx;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 4rpx;
}
.red{
    background-color: #E00300;
}
.blue{
    background-color: cornflowerblue;
}
.button:active{
    background-color: #CDCDCD;
}
</style>