当前位置: 首页 > news >正文

uniapp 中 的progress加载进度条 的使用,在 页面显示数据加载的进度条,使用户的使用体验效果更好

学习目标:

学习目标如下:

例如:

  • uniapp 中 的progress加载进度条 的使用,在 页面显示数据加载的进度条,使用户的使用体验效果更好

学习内容:

学习内容如下所示:

  1. 相关属性的说明
    在这里插入图片描述

  2. 进度条的显示

<view v-show="progressVisible" class="progress-box"><progress :percent="percent" show-info stroke-width="4" /></view>
  1. 是否显示属性的控制
progressVisible: false,
  1. 显示进度条
that.progressVisible = true
  1. 进度条的样式设置
.progress-box {display: flex;height: 50rpx;margin-bottom: 60rpx;}

知识总结:

提示:这里统计学习计划的总量

  • 1、进度条的显示 及 相关属性的设置
<view class="progress-box"><progress :percent="percent"     //百分比show-info    //在进度条右侧显示百分比active="true"     //进度条从左往右的动画active-mode="forwards"      //动画从上次结束点接着播:stroke-width="3"     //进度条线的宽度,单位为 pxbackgroundColor="#F5F5F5"      //未选择的进度条的颜色/></view>
  • 2、定义相关变量
data() {return {percent:0 //百分比0~100}},
  • 3、调用的方法
methods: {change(){// 开启定时器,定时器同样可以用在请求当中let clearInt = setInterval(()=>{this.percent ++;if(this.percent === 100){clearInterval(clearInt)uni.showToast({title: "加载成功",con: "success"});}},30)}
}
  • 4、直接调用方法即可,若想让进入页面自动调用该方法,则直接在 onLoad 中调用该方法即可。

     onLoad() {this.change()}
    
  • 样式的设置

.progress-box {display: flex;height: 50rpx;margin-bottom: 60rpx;}

相关文章:

uniapp 中 的progress加载进度条 的使用,在 页面显示数据加载的进度条,使用户的使用体验效果更好

学习目标&#xff1a; 学习目标如下&#xff1a; 例如&#xff1a; uniapp 中 的progress加载进度条 的使用&#xff0c;在 页面显示数据加载的进度条&#xff0c;使用户的使用体验效果更好 学习内容&#xff1a; 学习内容如下所示&#xff1a; 相关属性的说明 进度条的显…...

【尚硅谷】第01章:随堂复习与企业真题(Java语言概述)

来源&#xff1a;尚硅谷Java零基础全套视频教程(宋红康2023版&#xff0c;java入门自学必备) 基本都是宋老师发的资料里面的内容&#xff0c;只不过补充几个资料里没直接给出答案的问题的答案。 不想安装markdown笔记的app所以干脆在这里发一遍。 第01章&#xff1a;随堂复习…...

MyBatis的SqlSession理解

SqlSession是Mybatis最重要的构建之一&#xff0c;可以认为Mybatis一系列的配置目的是生成类似JDBC生成的Connection对象的statement对象&#xff0c;这样才能与数据库开启“沟通”&#xff0c;通过SqlSession可以实现增删改查&#xff08;当然现在更加推荐是使用Mapper接口形式…...

axios 某个接口使用自己独有的完整地址

可以在axios请求中使用完整的URL&#xff0c;而不使用baseURL&#xff0c; 只需将url字段设置为完整的URL即可 import axios from axios;export function getInfo() {return axios({url: http://192.168.3.15:8086/test/messages,method: post}); }直接在url字段中提供了完整的…...

WEB:Web_python_template_injection

背景知识 python模板注入 ssit 题目 打开题目&#xff0c;发现页面提示&#xff0c;翻译为python模板注入 先测试是否存在注入 可以发现被执行了 先查看所有的子类 payload {{[].__class__.__base__.__subclasses__()}} 利用site.Printer的os模块执行命令 payload {{.__…...

【Android安全】Embedded Trace Microcell模块

ETM: Embedded Trace Macrocell, hardware unit responsible to generate hardware instruction trace. ETM模块用于在硬件层面实现instruction trace&#xff0c;可用于辅助逆向分析。 使用教程&#xff1a; https://mcuoneclipse.com/2016/11/05/tutorial-getting-etm-inst…...

修改内核驱动之后-如何给内核打补丁

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言思路步骤1.进入下面路径2.修改文件calibrate.c3.使用git工具生产补丁文件4.移动补丁文件到自己的Linux的recipem目录下总结前言 本文来学习如何使用YOCTO修改Linux内核驱动之后,如何通过打补…...

【javaSE】 类和对象详解

目录 面向对象的初步认知 什么是面向对象 面向对象与面向过程 类定义和使用 简单认识类 类的定义格式 注意事项 练习定义类 定义一个狗类 定义一个学生类 注意事项 类的实例化 什么是实例化 注意事项 类和对象的说明 this引用 为什么要有this引用 什么是this引…...

大数据课程D5——hadoop的Sink

文章作者邮箱&#xff1a;yugongshiyesina.cn 地址&#xff1a;广东惠州 ▲ 本章节目的 ⚪ 掌握Sink的HDFS Sink&#xff1b; ⚪ 掌握Sink的Logger Sink&#xff1b; ⚪ 掌握Sink的File Roll Sink&#xff1b; ⚪ 掌握Sink的Null Sink&#xff1b; ⚪ 掌握Si…...

【数据结构】27.移除元素

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …...

机器学习分布式框架ray运行xgboost实例

Ray是一个开源的分布式计算框架&#xff0c;专门用于构建高性能的机器学习和深度学习应用程序。它的目标是简化分布式计算的复杂性&#xff0c;使得用户能够轻松地将任务并行化并在多台机器上运行&#xff0c;以加速训练和推理的速度。Ray的主要特点包括支持分布式任务执行、Ac…...

C++设计模式笔记

设计模式 如何解决复杂性&#xff1f; 分解 核心思想&#xff1a;分而治之&#xff0c;将大问题分解为多个小问题&#xff0c;将复杂问题分解为多个简单的问题。 抽象 核心思想&#xff1a;从高层次角度讲&#xff0c;人们处理复杂性有一个通用的技术&#xff0c;及抽象。…...

简单聊聊创新与创造力

文章目录 前言一、大脑运行的两种方式1、聚焦模式2、发散模式3、影响想法的因素a、背景知识b、兴趣c、天赋 4、思维固化 二、想法的不可靠1、对想法进行验证2、颠覆性创新&#xff0c;挤牙膏式创新3、为什么模仿这么多 三、更多更多的idea1、个人的方面a、积累不同的背景知识b、…...

使用TensorFlow训练深度学习模型实战(上)

大家好&#xff0c;尽管大多数关于神经网络的文章都强调数学&#xff0c;而TensorFlow文档则强调使用现成数据集进行快速实现&#xff0c;但将这些资源应用于真实世界数据集是很有挑战性的&#xff0c;很难将数学概念和现成数据集与我的具体用例联系起来。本文旨在提供一个实用…...

【Spring】什么是Bean的生命周期及作用域,什么是Spring的执行流程?

博主简介&#xff1a;想进大厂的打工人博主主页&#xff1a;xyk:所属专栏: JavaEE进阶 在前面的播客中讲解了如何从Spring中存取Bean对象&#xff0c;那么本篇我们来讲解Bean对象的生命周期是什么&#xff0c;Bean对象的6种作用域分别是什么&#xff0c;都有哪些区别&#xff…...

立创EDA学习

学习树莓派3B的板子发现有个扩展板比较好&#xff0c;自己最好画一个&#xff0c;反正免费。 学习视频&#xff1a;立创EDA&#xff08;专业版&#xff09;电路设计与制作快速入门。 下载专业版&#xff0c;并激活。【分专业版和标准版&#xff0c;专业版也是免费的】 手机…...

清风学习笔记—层次分析法—matlab对判断矩阵的一致性检验

在判断矩阵是否为正互反矩阵这块&#xff0c;我写了两种代码&#xff0c;改进前很麻烦且有错误&#xff0c;改进后简洁多了&#xff0c;改进前的代码还有错误&#xff0c;忽略了对角线的值必须都是1&#xff0c;只考虑了除开对角线的元素相乘为1。 %% 改进前代码 A[3 2 4;1/2 …...

大众安徽内推

大众汽车&#xff08;安徽&#xff09;有限公司是大众汽车集团在中国第一家专注于新能源汽车的合资企业&#xff0c;是集团在中国首家拥有全面运营管理权的合资企业&#xff0c;担负着产品研发及数字化研发的重任&#xff0c;将成为集团全球电动出行中心之一。 VW Anhui Offic…...

Meta “地平线世界”移动端应用即将上线,手机快乐元宇宙?

根据海外记者 Janko Roettgers 的报道&#xff0c;Meta 预计很快推出移动版的 VR 元宇宙服务 "地平线世界"&#xff0c;这是Meta 长期开发的产品。 根据最新报道&#xff0c;Meta宣布正在研发“地平线世界”的移动版&#xff0c;并表示这一服务已经可以在Quest VR设…...

更省更快更安全的云服务器,一站式集中管理,随时随地远程——站斧云桌面

随着全球化和数字化经济的发展&#xff0c;越来越多的企业开始海外扩张和拓展国际市场。而云服务器作为一种高效、灵活且可靠的IT基础设施方案&#xff0c;已成为出海企业不可或缺的重要工具。这里就为大家介绍云服务器在出海企业中的几个使用场景。 1.全球范围内协同办公 对…...

OpenClaw个性化设置:Qwen3.5-9B模型参数调优实战

OpenClaw个性化设置&#xff1a;Qwen3.5-9B模型参数调优实战 1. 为什么需要调整模型参数&#xff1f; 上周我在用OpenClaw自动处理一批技术文档时&#xff0c;遇到了一个奇怪的现象&#xff1a;同样的任务指令&#xff0c;有时候AI能完美执行&#xff0c;有时候却会输出一堆无…...

JeecgBoot启动配置

一、引入maven指定自己的maven仓库 二、指定JDK 记得apply&#xff01;&#xff01;&#xff01;&#xff01;然后OK 三、配置MySQL数据库(尽量≥5.7版本) 四、运行db文件夹下的SQL文件 五、后端本地环境&#xff08;application-dev.yml&#xff09;指定好数据源 1、M…...

KT0803K FM发射芯片Arduino驱动开发与射频工程实践

1. KT0803系列FM发射芯片Arduino库深度解析与工程实践指南1.1 芯片定位与系统级约束KT0803及其衍生型号&#xff08;KT0803K/L/M&#xff09;是高度集成的单芯片FM广播发射器&#xff0c;专为低功耗、小体积音频广播应用设计。该系列芯片内部集成了PLL频率合成器、立体声编码器…...

忍者像素绘卷效果对比:亮色像素美学 vs 传统暗调像素艺术表现力

忍者像素绘卷效果对比&#xff1a;亮色像素美学 vs 传统暗调像素艺术表现力 1. 作品概述 忍者像素绘卷是一款基于Z-Image-Turbo深度优化的图像生成工作站&#xff0c;它将忍者文化与16-Bit复古游戏美学完美融合。这款工具最显著的特点是采用了全新的"亮色像素"界面…...

Krita AI Diffusion图像引导适配器功能异常的深度解决方案

Krita AI Diffusion图像引导适配器功能异常的深度解决方案 【免费下载链接】krita-ai-diffusion Streamlined interface for generating images with AI in Krita. Inpaint and outpaint with optional text prompt, no tweaking required. 项目地址: https://gitcode.com/gh…...

Qwen3.5-9B企业落地:制造业BOM表识别+物料替代方案生成实战

Qwen3.5-9B企业落地&#xff1a;制造业BOM表识别物料替代方案生成实战 1. 项目背景与价值 在制造业生产过程中&#xff0c;物料清单(BOM)管理和物料替代是常见的痛点问题。传统方式需要人工核对大量表格数据&#xff0c;效率低下且容易出错。Qwen3.5-9B作为90亿参数的开源大语…...

终极指南:如何用ImageToSTL将任何图片变成3D打印模型

终极指南&#xff1a;如何用ImageToSTL将任何图片变成3D打印模型 【免费下载链接】ImageToSTL This tool allows you to easily convert any image into a 3D print-ready STL model. The surface of the model will display the image when illuminated from the left side. …...

从拆解到驱动:手把手教你用IMX6ULL驱动OV5640摄像头模块(附完整代码)

从拆解到驱动&#xff1a;手把手教你用IMX6ULL驱动OV5640摄像头模块&#xff08;附完整代码&#xff09; 1. 硬件连接与接口解析 OV5640作为一款500万像素的CMOS图像传感器&#xff0c;支持DVP和MIPI两种接口模式。在IMX6ULL平台上&#xff0c;我们选择使用DVP并行接口进行连接…...

双向充放电前馈控制:储能变流器PCS_PWM变流器的SVPWM调制与实现

【复现】储能变流器PCS_PWM变流器双向充放电前馈控制SVPWM调制 1、电路构成&#xff1a;三相电网、三相 PWM变流器、Buck/Boost 变换器和蓄电池 2、三相变流器控制&#xff1a;采用电压外环、电流内环双闭环PI 控制&#xff0c;电网电压和电容电流前馈&#xff0c;电感电流解耦…...

新手入门福音:用快马AI生成你的第一个Python版游戏账号管理工具

作为一个刚接触Python编程的新手&#xff0c;最近想尝试开发一个简单的游戏账号管理工具。这个需求其实挺常见的&#xff0c;比如我平时玩多个游戏&#xff0c;账号密码经常记混&#xff0c;如果能有个小工具统一管理就方便多了。在朋友的推荐下&#xff0c;我尝试用InsCode(快…...