uniapp中的progress进度条

分手后的思念是犯贱 2021-07-25 13:51 2805阅读 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

发表评论取消回复

表情：

评论列表（有 0 条评论，2805人围观）

还没有评论，来说两句吧...

相关阅读

相关 android progress进度条圆角,shape+颜色值搞定ProgressBar进度条圆角

![785c70aaec21?utm\_campaign=maleskine&utm\_content=note&utm\_medium=seo\_notes&utm\_sou

我就是我/ 2022年10月05日 07:57/ 0 赞/ 607 阅读

相关 Element el-progress 进度条详解

[点此查看全部文字教程、视频教程、源代码 ][Link 1] 本文目录 1. 前言 2. 基本用法 3. 调整颜色 4. 自定义文字内容

男娘i/ 2022年09月17日 03:03/ 0 赞/ 998 阅读

相关 android progress自定义进度条

效果图： ![这里写图片描述][20160428234112257] 1、在res资源文件夹下新建文件夹drawable，在drawable下新建xml文件progress

Love The Way You Lie/ 2022年08月21日 11:45/ 0 赞/ 205 阅读

相关 react配合modal实现progress进度条

一、简单版，入门 1.学习网址：[https://material-ui.com/demos/progress/][https_material-ui.com_demos_p

比眉伴天荒/ 2022年04月05日 13:23/ 0 赞/ 317 阅读

相关上传文件进度条进度事件progress

在`XMLHttpRequest` 的`open`之前重写`XMLHttpRequestUpload`对象的进度事件`progress`方法，监听`progress`方法，计算

浅浅的花香味﹌/ 2021年12月04日 01:47/ 0 赞/ 472 阅读

相关 bootstrap插件进度条progress以及分页pagination

进度条可以显示用户任务的完成过程。创建一个基本的进度条的步骤如下：添加一个带有 .progress 类的 <div>。接着，在上面的 <div> 内，添加

Myth丶恋晨/ 2021年09月15日 01:42/ 0 赞/ 424 阅读

相关微信小程序进度条 progress组件

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] 进度条。组件属性的长度单位默认为px，[2.4.0][]起支持传入单位(rpx/px)。

梦里梦外;/ 2021年09月07日 23:20/ 0 赞/ 540 阅读

相关 uniapp中的progress进度条

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

分手后的思念是犯贱/ 2021年07月25日 13:51/ 0 赞/ 2806 阅读

相关 uniapp 电商app进度条组件的使用（砍价进度条处理）

最近公司的电商app需要做一个砍价的功能，具体UI如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

傷城~/ 2021年07月25日 12:06/ 0 赞/ 1291 阅读

相关 HTML <progress> 进度条

HTML5之前没有自带的进度条效果，只能通过JavaScript结合CSS模拟实现。大家知道，版本的更新通常意味着功能的增强与便利性的提高，HTML也不例外。 HT...

小灰灰/ 2020年05月15日 18:20/ 0 赞/ 921 阅读