loading的使用

2024-05-13 16:17:06

loading可以实现的效果

在请求的数据没有返回时，实现加载的效果。原始的效果是比较简单的蓝线圆的转动，但是可以通过CSS改变它的样式，比如这样的

使用loading的思路

第一种：此区域只有一个接口的

第一步、在需要请求接口的区域加上loading，比如表单，或是下拉框

第二步、需要在return那里声明你在第一步绑定的loading(要声明的是你的loading的名字，也就是等号后面的那个命名)
格式： loading: false 或者是 loading: true 【这个loading是自己命名的】
第三步、在调用接口的地方使用loading
1、如果是 loading: false ,则在调用接口之前将loading开启，即将loading设为true(this.loading = true) ,在接口调用数据进行一堆操作之后将loading关闭,即职位false(this.loading = false)
2、如果是loading: true，则在调用接口之后可以使用if去判断关闭
if(this.loading) {
this.loading = false
}

第二种：此区域调用了多个接口

第一步、确定此区域调用了几个接口，在return那里声明一个变量interfaceCount是他等于接口数(interfaceCount: 2)
第二步、在每个调用的接口后面使得–interfaceCount
第三步、在wacth监听变化
interfaceCount(newValue) {
if (newValue === 0) {
this.loading = false
}
},

补：v-loding="loading"和 :loading="loading"的区别
1、一般v-loading用于表单、弹框的加载
2、:loading一般用于各种框的加载

PS：如有不对，请各位大佬指正

loading的使用相关推荐

GCC 链接 xxx：No such file or directory 及运行可执行文件 error while loading shared libraries: xxx.so 解决方案
关于 GCC 提示找不到指定库文件的这个问题,通常出现在以下 2 个场景中: 利用静态库或者动态库文件实现链接操作(生成可执行文件)时,·GCC 可能会提示 xxx:No such file or d ...
Android ProgressBar 加载中界面实现(loading 动画) 实现菊花的效果
实现的效果图如下: 使用方法ProgressBar ,如果感觉这个动画不是自己想要的,需要根据ui的图片来实现只需要将xml中的animated-rotate 修改为animation-list 贴 ...
ajax的loading方法,Ajax加载中显示loading的方法
使用ajaxStart方法定义一个全局的"加载中..."提示$(function(){ $("#loading").ajaxStart(function(){ ...
android 自定义loading,Android自定义动画-StarLoadingView
今天来分享第二个自定义loading的动画,起了个名字叫蹦跶的星星 ,还是老规矩先介绍,后上图. 实现效果在最后,GIF有点大,手机流量慎重. 介绍首先声明做这个动画的初衷是为了学习和分享,所以从 ...
error while loading shared libraries: libstdc++.so.5: wrong ELF class: ELFCLASS64
今天部署一个探针在运行的时候报了这样一个错:error while loading shared libraries: libstdc++.so.5: wrong ELF class: ELFCLAS ...
jquery-ajax请求：超时设置，增加 loading 提升体验
前端发送Ajax请求到服务器,服务器返回数据这一过程,因原因不同耗时长短也有差别,且这段时间内页面显示空白.如何优化这段时间内的交互体验,以及长时间内服务器仍未返回数据这一问题,是我们开发中不容忽视的 ...
Exception loading sessions from persistent storage
严重: Exception loading sessions from persistent storage java.io.EOFException 删除Tomcat里面的work/Catalina ...
微信浏览器跳转页面加载loading效果问题
2019独角兽企业重金招聘Python工程师标准>>> 开发一个微网页的项目,先需要跳转银联前加载进度条效果,因后台执行查询非常久,需要展现一个loading效果以下是最开始写的版 ...
使用JavaScript实现在页面上所有内容加载完之前一直显示loading...页面
Html 1 <body class="is-loading"> 2 <div class="curtain"> 3 <div c ...
移动端最强适配（rem适配之px2rem）移动端结合Vuex实现简单loading加载效果
一.rem之px2rem适配前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...

最新文章

热门文章