uniapp中的progress进度条

分手后的思念是犯贱 2021-07-25 13:51 2880阅读 0赞

官方示例：[https://uniapp.dcloud.io/component/progress][https_uniapp.dcloud.io_component_progress]

## 效果图： ##

![20210308130444876.gif][]

## 实现代码： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

<template>
        <view>
    		<progress :percent="pgList[0]" show-info stroke-width="3" />
    		<br>
    		<view style="display: flex;">
    		    <progress :percent="pgList[1]" stroke-width="3" />
    		    <uni-icons type="close" color="#dd524d"></uni-icons>
    		</view>
    		<br>
    		<progress :percent="pgList[2]" stroke-width="3" />
    		<br>
    		<progress :percent="80" activeColor="#10AEFF" stroke-width="3" />
    		<br>
    		<button @click="setProgress">设置进度</button>
    		<button type="warn" @click="clearProgress">清除进度</button>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    title: 'progress',
                    pgList: [0, 0, 0]
                }
            },
            methods: {
                setProgress() {
                    this.pgList = [20, 40, 60]
                },
                clearProgress() {
                    this.pgList = [0, 0, 0]
                }
            }
        }
    </script>

[https_uniapp.dcloud.io_component_progress]: https://uniapp.dcloud.io/component/progress
[20210308130444876.gif]: /images/20210725/4ce68cdd74a24853ac81972e0a31f29a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/236e46f1079a492ba80fe3191f44a401.png