uniapp中uview组件库中丰富的LineProgress 线形进度条 的使用方法

目录

平台差异说明

#基本使用

#设置进度条动画效果

#设置进度条内部显示百分比值

#修改进度条的样式

#API

#Props

#Slots


平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

#基本使用

  • 通过percent设置当前的进度值,该值区间为0-100.
  • 通过active-color设置进度条的颜色,也可以直接设置type主题颜色(优先起作用),使用预置值
<u-line-progress active-color="#2979ff" :percent="70"></u-line-progress>

#设置进度条动画效果

该效果会在已完成的百分比部分显示移动的条纹(具体见示例效果)

  • striped参数配置是否显示条纹
  • striped-active参数配置条纹是否具有动态效果
<u-line-progress :striped="true" :percent="70" :striped-active="true"></u-line-progress>

#设置进度条内部显示百分比值

参数为show-percent

  • 说明:进度条可以通过height设置高度,如果高度太小的话,是无法在内部显示当前的百分比值的
<u-line-progress :percent="70" :show-percent="true"></u-line-progress>

#修改进度条的样式

  • active-color参数修改激活部分的颜色
  • round参数设置进度条两端是否为半圆
<u-line-progress :percent="70" :round="false" active-color="#ff9900"></u-line-progress>

#API

#Props

参数说明类型默认值可选值
percent进度条百分比值,为数值类型,0-100String | Number--
round进度条两端是否为半圆Booleantruefalse
type如设置,active-color值将会失效String-success / primary / error / info / warning
active-color进度条激活部分的颜色String#19be6b-
inactive-color进度条的底色,默认为灰色String#ececec-
show-percent是否在进度条内部显示当前的百分比值数值Booleantruefalse
height进度条的高度,单位rpxString | Number28-
striped是否显示进度条激活部分的条纹Booleanfalsetrue
striped-active条纹是否具有动态效果Booleanfalsetrue

#Slots

名称说明
default 1.5.4传入自定义的显示内容,将会覆盖默认显示的百分比值

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/608806.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机视觉下的数据增强代码实现

数据增强的实现 使用经典的pytorch框架下的torchvision.transformers对计算机视觉进行增强的代码实现。 使用下面的图像进行数据增强&#xff0c;相应的效果图如下所示&#xff01; 导包 import os import PIL.Image as Image from torchvision import transforms as transfor…

微信小程序的登录模块实现

用户联动微信小程序。相关的实现层代码 发送url请求。 /*** 登录验证** param code 临时登录码* return */Overridepublic Map<String, Object> checkLogin(String code) {String url "https://api.weixin.qq.com/sns/jscode2session?appid" appid "…

RT-Thread 线程间同步 信号量

线程间同步 在多线程实时系统中&#xff0c;一项工作的完成往往可以通过多个线程协调的方式共同来完成。 例如一项工作中的两个线程&#xff1a;一个线程从传感器中接收数据并且将数据写到共享内存中&#xff0c;同时另一个线程周期性地从共享内存中读取数据并发送出去显示&a…

SpringCloud系列篇:核心组件之网关组件

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于SpringCloud的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.网关组件是什么 二. 网关组件的…

vivado 创建编译后工程

创建后期合成项目 合成后项目以合成网表、完全生成的块设计、完全生成的IP以及相应的约束。然后&#xff0c;您可以分析、布局和实施设计 注意&#xff1a;您可以使用XST或第三方合成工具来创建合成网表。 重要&#xff01;使用EDIF和NGC文件时&#xff0c;顶部单元格名称必…

java递归生成树型结构

java递归生成树 1.获取数据 public List<TreeClassifyRespVO> getTreeClassifyList(ClassifyPageReqVO reqVO) {List<ClassifyDO> classifyList classifyMapper.selectList(reqVO);List<TreeClassifyRespVO> childClassifyResp ClassifyConvert.INSTANCE…

MySQL之导入、导出

文章目录 1.navicat导入导出2.mysqldump命令导入导出2.1导出2.2导入 3.load data infile命令导入导出4.远程备份5.思维导图 1.navicat导入导出 使用Navicat工具导入t_log 共耗时 55s 2.mysqldump命令导入导出 2.1导出 导出表数据和表结构 语法&#xff1a; mysqldump -u用…

EasyExcel百万数据导入导出

文章目录 百万数据准备EasyExcel导出EasyExcel不支持并发写导出功能的代码片段 EasyExcel导入 https://gitee.com/antirust/idooy-stable/tree/master/idooy-EasyExcel 开发中&#xff0c;导入导出功能对于后台管理这样的系统来说太常用了&#xff0c;除了实现该功能外导入导出…

【算法笔记】动态规划专题

所有解题思路已经直接整合在代码注释中。 动态规划 整体结构 条件抽象与状态描述 【重点1】根据题目给出的限制条件&#xff0c;抽象出会影响决策的部分&#xff0c;这个条件的数量和用法&#xff0c;基本上就是dp领域内题目分类的依据了。比如&#xff0c;单上限的一般用线…

Python爬虫-爬取豆瓣Top250电影信息

&#x1f388; 博主&#xff1a;一只程序猿子 &#x1f388; 博客主页&#xff1a;一只程序猿子 博客主页 &#x1f388; 个人介绍&#xff1a;爱好(bushi)编程&#xff01; &#x1f388; 创作不易&#xff1a;喜欢的话麻烦您点个&#x1f44d;和⭐&#xff01; &#x1f388;…

QT qss文件设置样式

方式一 &#xff08;单个&#xff09; 方式二 &#xff08;全局&#xff09; 所有按钮都会采用这个样式。 方式三 &#xff08;qss文件&#xff09; 创建资源文件 创建qss文件&#xff08;Button.qss&#xff09; 引用qss文件 QApplication a(argc, argv);QString qss;QFile…

金三银四来了,助你一臂之力,10个专家级技巧助你优化React应用性能

Hey,高级JS React开发人员!您是否正在寻找提升技能,优化React应用程序以实现顶级性能? 您来对了! 在本文中,我将与您分享10个专家级性能技巧,这些技巧将大大增强您的React开发。 准备优化、简化和使您的应用程序快速如闪电。让我们深入探讨! 使用函数组件和React钩子: 与…

Kettle Local引擎使用记录(一)(基于Kettle web版数据集成开源工具data-integration源码)

Kettle Web &#x1f4da;第一章 前言&#x1f4da;第二章 demo源码&#x1f4d7;pom.xml引入Kettle引擎核心文件&#x1f4d7;java源码&#x1f4d5; controller&#x1f4d5; service&#x1f4d5; 其它&#x1f4d5; maven settings.xml &#x1f4d7;测试&#x1f4d5; 测试…

【STM32】STM32学习笔记-USART串口数据包(28)

00. 目录 文章目录 00. 目录01. 串口简介02. HEX数据包03. 文本数据包04. HEX数据包接收05. 文本数据包接收06. 预留07. 附录 01. 串口简介 串口通讯(Serial Communication)是一种设备间非常常用的串行通讯方式&#xff0c;因为它简单便捷&#xff0c;因此大部分电子设备都支持…

Python 使用input函数从键盘输入数据

在Python中&#xff0c;input()函数可以从键盘获取用户的输入数据。当我们使用input()函数时&#xff0c;会暂停程序的执行&#xff0c;等待用户输入数据&#xff0c;并将用户输入的数据作为字符串返回。 如&#xff1a; name input("请输入你的姓名&#xff1a;"…

py判断端口是否被占用

在Python中&#xff0c;你可以使用socket库来判断一个端口是否被占用。下面是一个简单的示例代码&#xff1a; import socketdef is_port_open(port):with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:return s.connect_ex((host, port)) 0# 使用示例 if is_por…

Python私有变量的定义与访问

class Student():def __init__(self, name, age):self.name nameself.age ageself.__score 0def marking(self, score):if score < 0:return 分数不能为0self.__score scoreprint(self.name 同学本次得分是: str(self.__score)) def __talk(self): # 私有的类可通过在…

RocketMQ5-03RocketMQ-Dashboard和Java客户端访问示例

接上篇02快速部署RocketMQ5.x(手动和容器部署) 已经完成 RocketMQ5.0 环境的部署&#xff0c;就需要对这个环境进行测试&#xff0c;查看集群、写入消息、读取消息等 本篇教你如何使用和查看部署的服务&#xff1a; Docker部署 Dashboard 获取镜像并下载部署服务 客户端连接 …

哈希-力扣01两数之和

题目 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以按任意顺…

spring boot 2升级为spring boot 3中数据库连接池druid的问题

目录 ConfigurationClassPostProcessor ConfigurationClassBeanDefinitionReader MybatisPlusAutoConfiguration ConditionEvaluator OnBeanCondition 总结 近期给了一个任务&#xff0c;要求是对现有的 spring boot 2.x 项目进行升级&#xff0c;由于 spring boot 2.x 版…