优雅地使用loading(推荐)
作者:ZZZZZZJJJJJJJ 时间:2024-04-30 08:42:01
前言
不知道从什么时候开始有了写博客的想法,奈何自己的知识储备还很薄弱,迟迟无法下笔。这是我的第一篇博客,算是记录一下自己学习前端以来的一些知识吧。如有错漏,恳请指出,您的批评和指正是我前进路上的一大动力!
在平时的开发过程中,我们需要异步等待数据,常常会利用loading图来加强用户的体验,让用户知道我们有在加载,那么如何在开发过程中更为优雅地使用loading呢?开发小程序的时候我们只需要一句wx.showLoading()就完事儿了,而在web开发中也有相应的UI框架来帮我们完成这件事情。那究竟是怎么实现的呢,让我们来一起看一下。
先实现一个简单的loading
<div class="container">
<div class="loading"></div>
</div>
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.loading {
width: 100px;
height: 100px;
border-radius: 100%;
border: 5px #ffffff solid;
border-right-color: #87CEEB;
animation: loading 1s linear infinite;
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
这样我们就实现了一个比较简单的转圈圈loading图,下面我将分别叙述在vue和react中如何优雅地使用这个loading。
Vue部分
首先先用vue init webpack生成一个vue脚手架,插件的目录如下图所示
loading.vue里写进了我们上面实现的简单loading的代码,加上一点点逻辑
<script>
export default {
name: "loading",
data() {
return {
show: false
}
}
}
</script>
index.js
//先引入loading组件
import LoadingComponent from './loading'
const Loading = {}
Loading.install = function (Vue) {
// 生成一个Vue的子类 同时这个子类也就是组件
const ToastConstructor = Vue.extend(LoadingComponent)
// 生成一个该子类的实例
const instance = new ToastConstructor()
// 将这个实例挂载在我创建的div上
// 并将此div加入全局挂载点内部
instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el)
//注入vue的原型链
Vue.prototype.$loading = {
show() {
instance.show = true
},
close(){
instance.show = false
}
}
}
export default Loading
这里我们生成个一个Vue的子类,然后将它的实例挂载到全局。将一些方法注入到Vue的原型链中,这样就可以在任何组件中通过类似于this.$loading.show()的方法来控制loading图的显示和隐藏。最后我们导出Loading对象。然后在main.js中引入Loading插件,并调用Vue.use()方法来注册插件
最后,让我们来测试一下吧。测试代码如下,用setTimeout来模拟异步请求。
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: ''
}
},
mounted() {
this.$loading.show()
setTimeout(()=>{
this.$loading.close()
this.msg = '加载完辽!'
},3000)
}
}
</script>
奶思!测试成功!
React部分
在此之前,我先介绍一下react中的高阶组件(HOC)
高阶组件
在React中,多个不同的组件中如果需要用到相同的功能,这个解决方法,通常有Mixin和高阶组件。但是由于Mixin过多会使使得组件难以维护,在React ES6中Mixin不再被支持。高阶组件是一个接替Mixin实现抽象组件公共功能的好方法。高阶组件其实是一个函数,接收一个组件作为参数,返回一个包装组件作为返回值,类似于高阶函数。
具体实现
先用create-react-app 生成一个测试脚手架,高阶组件目录如下图所示
index.css主要是loading的样式,index.js的代码如下
import React from 'react';
import './index.css'
function hoc(ComponentClass) {
return class HOC extends ComponentClass {
render() {
if (!this.state.loading) {
console.log(this.state.loading)
return super.render()
}
else {
return (<div>
<div className="container">
<div className="loading"></div>
</div>
</div>)
}
}
}
}
export default hoc
我们定义了一个hoc函数,接受一个组件作为参数。通过this.state来操作组件的state属性,通过super.render()来渲染组件。最后导出hoc函数。然后在组件中引入,如下
import hoc from '../hoc/loading/index'
class Home extends Component {
constructor(props) {
super(props)
this.state = {
msg: '还没加载好',
loading: true
}
}
render() {
return (
<div>
{this.state.msg}
</div>
);
}
componentDidMount() {
let loading = this.state.loading
setTimeout(() => {
this.setState({
loading: !loading,
msg: '加载完辽!'
})
}, 3000)
}
}
export default hoc(Home)
同样是采用setTimeout来模拟异步请求,测试结果也是成功的。react部分并没有用装饰器来使用高阶组件,还不够优雅。。。(在create-react-app中把网上的处理方法都试了一遍,还是报错。。)
最后
至此,在Vue和React中如何优雅地使用loading就到此结束辽。这是一个超简易版的demo,但还是希望能分享给大家。写完才真正体会到了那句老话,纸上得来终觉浅,绝知此事要躬行。
以上所述是小编给大家介绍的loading使用解整合网站的支持!
来源:https://juejin.im/post/5cb9800a6fb9a068973ed95e
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python使用psutil模块获取系统状态
关于Numpy中的行向量和列向量详解
基于Tensorflow一维卷积用法详解
![](https://img.aspxhome.com/file/2023/3/111923_0s.jpg)
Python全栈之进程和守护进程
![](https://img.aspxhome.com/file/2023/1/70781_0s.png)
深入浅析php json 格式控制
Win10下用Anaconda安装TensorFlow(图文教程)
![](https://img.aspxhome.com/file/2023/1/110031_0s.jpg)
Python实现简单图像缩放与旋转
![](https://img.aspxhome.com/file/2023/8/92168_0s.png)
python中异常捕获方法详解
一文轻松掌握python语言命名规范规则
python+jinja2实现接口数据批量生成工具
![](https://img.aspxhome.com/file/2023/4/84944_0s.png)
微前端qiankun沙箱实现源码解读
golang定时任务cron项目实操指南
![](https://img.aspxhome.com/file/2023/8/99648_0s.jpg)
Python实现的生产者、消费者问题完整实例
JavaScript验证图片类型(扩展名)的函数分享
Go语言中日期包(time包)的具体使用
![](https://img.aspxhome.com/file/2023/1/127361_0s.jpg)
Python实现Word文档转换Markdown的示例
![](https://img.aspxhome.com/file/2023/6/67296_0s.png)
Js中的函数直接量
未能加载文件或程序集“XXX”或它的某一个依赖项。试图加载格式不正确的程序。
bootstrap-table组合表头的实现方法
![](https://img.aspxhome.com/file/2023/8/127178_0s.png)