溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
不知道從什么時候開始有了寫博客的想法，奈何自己的知識儲備還很薄弱，遲遲無法下筆。這是我的第一篇博客，算是記錄一下自己學習前端以來的一些知識吧。如有錯漏，懇請指出，您的批評和指正是我前進路上的一大動力！
在平時的開發過程中，我們需要異步等待數據，常常會利用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使用解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
