优雅地使用loading(推荐)


Posted in Javascript onApril 20, 2019

前言 

不知道从什么时候开始有了写博客的想法,奈何自己的知识储备还很薄弱,迟迟无法下笔。这是我的第一篇博客,算是记录一下自己学习前端以来的一些知识吧。如有错漏,恳请指出,您的批评和指正是我前进路上的一大动力!

在平时的开发过程中,我们需要异步等待数据,常常会利用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(推荐)

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()方法来注册插件

优雅地使用loading(推荐)

最后,让我们来测试一下吧。测试代码如下,用setTimeout来模拟异步请求。

<script>
 export default {
 name: 'HelloWorld',
 data() {
  return {
  msg: ''
  }
 },
 mounted() {
  this.$loading.show()
  setTimeout(()=>{
  this.$loading.close()
  this.msg = '加载完辽!'
  },3000)
 }
 }
</script>

优雅地使用loading(推荐)

奶思!测试成功!

React部分

在此之前,我先介绍一下react中的高阶组件(HOC)

高阶组件

在React中,多个不同的组件中如果需要用到相同的功能,这个解决方法,通常有Mixin和高阶组件。但是由于Mixin过多会使使得组件难以维护,在React ES6中Mixin不再被支持。高阶组件是一个接替Mixin实现抽象组件公共功能的好方法。高阶组件其实是一个函数,接收一个组件作为参数,返回一个包装组件作为返回值,类似于高阶函数。

具体实现

先用create-react-app 生成一个测试脚手架,高阶组件目录如下图所示

 优雅地使用loading(推荐)

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使用解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
来自qq的javascript面试题
Jul 24 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
Vue制作Todo List网页
Apr 26 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
详解JavaScript的数据类型以及数据类型的转换
Apr 20 #Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 #Javascript
函数式编程入门实践(一)
Apr 20 #Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 #Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 #Javascript
详解vue使用$http服务端收不到参数
Apr 19 #Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 #Javascript
You might like
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
js 函数调用模式小结
2011/12/26 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
python实现rest请求api示例
2014/04/22 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
python实现俄罗斯方块
2018/06/26 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
python元组拆包实现方法
2021/02/28 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
2015年六年级班主任工作总结
2015/10/15 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫