如何更好地使用loading
前言
在平时的开发过程中,我们需要异步等待数据,常常会利用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的代码,加上一点点逻辑
export default {name: "loading", data() { return {show: false }}}
index.js
//先引入loading组件
import LoadingComponent from './loading' const Loading = {}
Loading.install = function (Vue) {// 生成一个Vue的子类 同时这个子类也就是组件
const LoadingConstructor = Vue.extend(LoadingComponent)
// 生成一个该子类的实例
const instance = new LoadingConstructor()
// 将这个实例挂载在我创建的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来模拟异步请求。
export default {name: 'HelloWorld', data() { return {msg: '' }}, mounted() {this.$loading.show() setTimeout(()=>{this.$loading.close()this.msg = '加载完辽!' },3000)}}
奶思!测试成功!
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 class="container"><div class="loading"></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 ({this.state.msg});} componentDidMount() { let loading = this.state.loading setTimeout(() => {this.setState({loading: !loading,msg: '加载完辽!' })}, 3000)}
}
export default hoc(Home)
同样是采用setTimeout来模拟异步请求,测试结果也是成功的。react部分并没有用装饰器来使用高阶组件,还不够优雅。。。
最后
至此,在Vue和React中如何优雅地使用loading就到此结束辽。这是一个超简易版的demo,但还是希望能分享给大家。写完才真正体会到了那句老话,纸上得来终觉浅,绝知此事要躬行。
如何更好地使用loading相关推荐
- 使用loading动画让你的条件渲染页面更高级
前言 在我们做项目的使用常常会使用条件渲染去有选择的给用户展示相关页面,如果渲染的数据或场景比较多比较复杂,那么往往需要3.4s的时间去完成,用户点击了之后就会陷入3.4s的空白期,并且这段时间屏幕是 ...
- React Native封装Toast与加载Loading组件
React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...
- 移动spa商城优化记(一)---首屏优化篇
背景 随着公司业务的不断壮大,最近老是有用户反应公司APP内的商城打开比较慢,这可不行啊,慢了容易流失用户,流失用户减少公司业绩,公司业绩少我的年终奖就少----,所以为了公司,也为了自己,开始优化之 ...
- iOS之深入解析App Thinning的应用瘦身优化
当前 iOS App 的编译打包方式是把适配兼容多个设备的执行文件及资源文件合并一个文件,上传和下载的文件则包含了所有的这些文件,导致占用较多的存储空间. App Thinning 是一个关于节省 i ...
- Cocos2dx版本介绍【至3.10版】
Cocos Studio升级为Cocos.更优秀的产品.更优质的服务. 1. 游戏开发一站式解决方案,低成本.高效率 2. 高性能,一次制作,多终端平台共享 3. Windows与Mac同步 ...
- 【cocos2dx学习笔记】制作Loding场景
为什么要制作loading场景? 在实际游戏中会有一个场景中拥有大量的资源,直接跳转会造成卡顿,而且在场景跳转的过程中会存在一个时间段,在这个时间段中跳转前的场景和将要跳转到的场景都占用着系统资源,会 ...
- Flutter完整开发实战详解(二、 快速开发实战篇) | 掘金技术征文
作为系列文章的第二篇,继<Flutter完整开发实战详解(一.Dart语言和Flutter基础)>之后,本篇将为你着重展示:如何搭建一个通用的Flutter App 常用功能脚手架,快速 ...
- Wwise的内存问题
1)Wwise的内存问题 2)关于Planar Shadow的疑问 3)PPS的LDR纹理冗余 4)游戏第一次冷启动耗时长 5)Lua解析指令的虚拟机会占用内存吗 这是第268篇UWA技术知识分享的 ...
- 中国五十六个民族简介
56个民族是中华人民共和国灿烂星空中(五十六个星座). 中华民族共包括56个民族,汉族是中国的主体民族,占全部人口的91.51%,其他还有55个民族,占8.49%(第六次人口普查).汉族和55个少数民 ...
最新文章
- 条件变量pthread_cond_wait()和pthread_cond_signal()详解
- 《深度学习导论及案例分析》一2.11概率图模型的推理
- python介绍和用途-python应用领域介绍
- J2EE从头开始__EJB3
- java short float_Java Short floatValue()用法及代码示例
- python网络爬虫资源库名_Python网络爬虫
- 华为鸿蒙净水机,华为鸿蒙OS 2.0手机版功能抢先曝光
- 把表单转成json,并且name为key,value为值
- numpy合并循环数组的array_「Python技巧」如何加快循环操作和Numpy数组运算速度
- 2.11.PHP7.1 狐教程-【PHP 数组】
- 尚学人工智能课程---2、算法工程师和大数据介绍
- Windows CE 5.0 五笔输入法
- 文本框里面加删除按钮
- Python数据分析-房价的影响因素图解
- 北京海淀驾校学车经验
- 交换机putty怎么调试_debian10使用putty配置交换机console口
- 使用cef3开发的浏览器不支持flash问题的解决
- raid5磁盘阵列原理以及实现
- 智能化测试技术探索与实践——AAAS/IEEE Fellow、北京大学讲席教授谢涛阿里行
- PCA(主成分分析)