快捷導(dǎo)航

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

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

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

前言

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

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

先實(shí)現(xiàn)一個(gè)簡(jiǎ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);
 }
}

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

Vue部分

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

loading.vue里寫進(jìn)了我們上面實(shí)現(xiàn)的簡(jiǎn)單loading的代碼，加上一點(diǎn)點(diǎn)邏輯

<script>
 export default {
 name: "loading",
 data() {
  return {
  show: false
  }
 }
 }
</script>

index.js

//先引入loading組件
import LoadingComponent from './loading'
const Loading = {}
Loading.install = function (Vue) {
// 生成一個(gè)Vue的子類 同時(shí)這個(gè)子類也就是組件
const ToastConstructor = Vue.extend(LoadingComponent)
// 生成一個(gè)該子類的實(shí)例
const instance = new ToastConstructor()
// 將這個(gè)實(shí)例掛載在我創(chuàng)建的div上
// 并將此div加入全局掛載點(diǎn)內(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

這里我們生成個(gè)一個(gè)Vue的子類，然后將它的實(shí)例掛載到全局。將一些方法注入到Vue的原型鏈中，這樣就可以在任何組件中通過(guò)類似于this.$loading.show()的方法來(lái)控制loading圖的顯示和隱藏。最后我們導(dǎo)出Loading對(duì)象。然后在main.js中引入Loading插件，并調(diào)用Vue.use()方法來(lái)注冊(cè)插件

最后，讓我們來(lái)測(cè)試一下吧。測(cè)試代碼如下，用setTimeout來(lái)模擬異步請(qǐng)求。

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

奶思！測(cè)試成功！

React部分

在此之前，我先介紹一下react中的高階組件(HOC)

高階組件

在React中，多個(gè)不同的組件中如果需要用到相同的功能，這個(gè)解決方法，通常有Mixin和高階組件。但是由于Mixin過(guò)多會(huì)使使得組件難以維護(hù)，在React ES6中Mixin不再被支持。高階組件是一個(gè)接替Mixin實(shí)現(xiàn)抽象組件公共功能的好方法。高階組件其實(shí)是一個(gè)函數(shù)，接收一個(gè)組件作為參數(shù)，返回一個(gè)包裝組件作為返回值，類似于高階函數(shù)。

具體實(shí)現(xiàn)

先用create-react-app 生成一個(gè)測(cè)試腳手架，高階組件目錄如下圖所示

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

我們定義了一個(gè)hoc函數(shù)，接受一個(gè)組件作為參數(shù)。通過(guò)this.state來(lái)操作組件的state屬性，通過(guò)super.render()來(lái)渲染組件。最后導(dǎo)出hoc函數(shù)。然后在組件中引入，如下

import hoc from '../hoc/loading/index'

class Home extends Component {
 constructor(props) {
  super(props)
  this.state = {
   msg: '還沒(méi)加載好',
   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來(lái)模擬異步請(qǐng)求，測(cè)試結(jié)果也是成功的。react部分并沒(méi)有用裝飾器來(lái)使用高階組件，還不夠優(yōu)雅。。。（在create-react-app中把網(wǎng)上的處理方法都試了一遍，還是報(bào)錯(cuò)。。）

最后

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

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

您可能感興趣的文章: