前言
做網(wǎng)站、網(wǎng)站建設介紹好的網(wǎng)站是理念、設計和技術的結合。成都創(chuàng)新互聯(lián)擁有的網(wǎng)站設計理念、多方位的設計風格、經(jīng)驗豐富的設計團隊。提供PC端+手機端網(wǎng)站建設,用營銷思維進行網(wǎng)站設計、采用先進技術開源代碼、注重用戶體驗與SEO基礎,將技術與創(chuàng)意整合到網(wǎng)站之中,以契合客戶的方式做到創(chuàng)意性的視覺化效果。
不知道從什么時候開始有了寫博客的想法,奈何自己的知識儲備還很薄弱,遲遲無法下筆。這是我的第一篇博客,算是記錄一下自己學習前端以來的一些知識吧。如有錯漏,懇請指出,您的批評和指正是我前進路上的一大動力!
在平時的開發(fā)過程中,我們需要異步等待數(shù)據(jù),常常會利用loading圖來加強用戶的體驗,讓用戶知道我們有在加載,那么如何在開發(fā)過程中更為優(yōu)雅地使用loading呢?開發(fā)小程序的時候我們只需要一句wx.showLoading()就完事兒了,而在web開發(fā)中也有相應的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)了一個比較簡單的轉圈圈loading圖,下面我將分別敘述在vue和react中如何優(yōu)雅地使用這個loading。
Vue部分
首先先用vue init webpack生成一個vue腳手架,插件的目錄如下圖所示
loading.vue里寫進了我們上面實現(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圖的顯示和隱藏。最后我們導出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實現(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()來渲染組件。最后導出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來模擬異步請求,測試結果也是成功的。react部分并沒有用裝飾器來使用高階組件,還不夠優(yōu)雅。。。(在create-react-app中把網(wǎng)上的處理方法都試了一遍,還是報錯。。)
最后
至此,在Vue和React中如何優(yōu)雅地使用loading就到此結束遼。這是一個超簡易版的demo,但還是希望能分享給大家。寫完才真正體會到了那句老話,紙上得來終覺淺,絕知此事要躬行。
以上所述是小編給大家介紹的loading使用解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
本文題目:優(yōu)雅地使用loading(推薦)
URL鏈接:http://redsoil1982.com.cn/article16/gpjpdg.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供微信公眾號、營銷型網(wǎng)站建設、用戶體驗、企業(yè)建站、域名注冊、動態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)