快捷導(dǎo)航

優(yōu)雅地使用loading(推薦)

更新時間：2019年04月20日 11:25:53 作者：ZZZZZZJJJJJJJ

這篇文章主要介紹了在Vue和React中如何優(yōu)雅地使用loading，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

不知道從什么時候開始有了寫博客的想法，奈何自己的知識儲備還很薄弱，遲遲無法下筆。這是我的第一篇博客，算是記錄一下自己學(xué)習(xí)前端以來的一些知識吧。如有錯漏，懇請指出，您的批評和指正是我前進(jìn)路上的一大動力！

在平時的開發(fā)過程中，我們需要異步等待數(shù)據(jù)，常常會利用loading圖來加強用戶的體驗，讓用戶知道我們有在加載，那么如何在開發(fā)過程中更為優(yōu)雅地使用loading呢？開發(fā)小程序的時候我們只需要一句wx.showLoading()就完事兒了，而在web開發(fā)中也有相應(yīng)的UI框架來幫我們完成這件事情。那究竟是怎么實現(xiàn)的呢，讓我們來一起看一下。

先實現(xiàn)一個簡單的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);
 }
}

這樣我們就實現(xiàn)了一個比較簡單的轉(zhuǎn)圈圈loading圖，下面我將分別敘述在vue和react中如何優(yōu)雅地使用這個loading。

Vue部分

首先先用vue init webpack生成一個vue腳手架，插件的目錄如下圖所示

loading.vue里寫進(jìn)了我們上面實現(xiàn)的簡單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()
// 將這個實例掛載在我創(chuàng)建的div上
// 并將此div加入全局掛載點內(nèi)部
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圖的顯示和隱藏。最后我們導(dǎo)出Loading對象。然后在main.js中引入Loading插件，并調(diào)用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實現(xiàn)抽象組件公共功能的好方法。高階組件其實是一個函數(shù)，接收一個組件作為參數(shù)，返回一個包裝組件作為返回值，類似于高階函數(shù)。

具體實現(xiàn)

先用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函數(shù)，接受一個組件作為參數(shù)。通過this.state來操作組件的state屬性，通過super.render()來渲染組件。最后導(dǎo)出hoc函數(shù)。然后在組件中引入，如下

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來模擬異步請求，測試結(jié)果也是成功的。react部分并沒有用裝飾器來使用高階組件，還不夠優(yōu)雅。。。（在create-react-app中把網(wǎng)上的處理方法都試了一遍，還是報錯。。）

最后

至此，在Vue和React中如何優(yōu)雅地使用loading就到此結(jié)束遼。這是一個超簡易版的demo，但還是希望能分享給大家。寫完才真正體會到了那句老話，紙上得來終覺淺，絕知此事要躬行。

以上所述是小編給大家介紹的loading使用解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: