Elegantly use loading (recommended)

I don’t know when I started to write a blog idea, but my knowledge reserves are still weak, and I can’t get it. This is my first blog, regarding some knowledge since I have learned my front. If there is a mistake, please point out that your criticism and pointing is a big driving force on my forward!

In the usual development process, we need to wait for the data asynchronously, often use the loading map to enhance the user’s experience, let users know that we are loading, so how to use loading more elegant during development Woolen cloth? When we develop a small program, we only need a word wx.showloading (), and there is also the corresponding UI framework in Web development to help us complete this. How is it realized, let’s take a look.

First achieve a simple loading

  .CONTAINER {Position: 50%; TOP: 50%; Transform: Translate (-50%, -50%);}. Loading {width: 100px; height: 100px; border-radius: 100%; border: 5px #fffffff solid; border-right-color: # 87ceeb; animation: loading 1s linear infinite;} @ Keyframes Loading {0% {Transform: Rotate (0DEG);} 100% {Transform: Rotate (360DEG);}} 
So we have achieved a ratioA simpler circle Loading diagram, I will use this as an elegantly use this loading in Vue and React, respectively.

First use the Vue Init Webpack to generate a Vue scaffold, the directory of the plugin is shown below

Loading.Vue writes the simple Loading code we implemented above, plus a little logic


Export Default {name: “loading” , DATA () {return {show: false}}}

     / / introduced first loading assembly import LoadingComponent from './loading'const loading = {} Loading.install = function (Vue) {// generating a subclass of this subclass, while Vue i.e. components const ToastConstructor = Vue.extend (LoadingComponent ) / / Generate a subclass of instance constance = new toastconstructor () // Mount this instance on the DIV I created / / / / joined this DIV to the global mount point internal instance. $ Mount (Document.createElement ('Div')) Document.Body.Appendchild (Instance. $ EL) // Injects Vue's prototype chain Vue.Prototype. $ loading = {show) {instance.show = true}, close () {instance.show = false}}}} export default loading 
Here we generate a subclass of a Vue, then Mount its instance to the global. Injecting some methods into the prototype chain of the Vue so that the display and hide of the Loading chart can be controlled by a method similar to this. $ Loading.show () in any component. Finally we export the loading object. Then introduce the loading plugin in main.js, and call the vue.use () method to register the plugin

Finally, let’s test it. The test code is as follows, with settimeout to simulate asynchronous requests.
Export default {name: ‘helloworld’, data () {return {msg: ” ‘}}, mounted () {this. $ Loading.show () settimeout (() => {this. $ loading.close () this.msg = ‘loading is loaded with Liao!’}, 3000)}


Milky! Test success!

React part
 Before this, I first introduced high-order components (HOC)     


In React, in multiple different components need to be used for the same function, this solution typically has Mixin and high-order components. But due to MIXIN will make it difficult to maintain the components, and Mixin in React ES6 is no longer supported. High-order components are a good way to replace the public function of Abstract Components in Mixin. The high-order component is actually a function that receives a component as a parameter, returns a packaging component as a return value, similar to a high order function.

First use Create-React-App to generate a test scaffold, the high-order component directory is shown below

Index.css is mainly the style of Loading, the code of index.js is as follows

Import React from ‘React’; import ‘./index .css’function hoc (ComponentClass) {Return Class Hoc Extends ComponentClass {render () {if (! this.state.load) {console.log (this.state.load) Return Super.Render ()} else {return

)}}}} Export Default Hoc

We define an HOC function and accept one Components as parameters. Operate the STATE properties of the component via this.State, rendering the components via super.render (). Finally export the HOC function. Then introduced in the assembly, as follows 优雅地使用loading(推荐)

Import Hoc from ‘../hoc/loading/index’class home extends Component {Constructor (props) {super (props) this.State = {msg: ‘has not been loaded, Loading: true}} render () {return ( {this.state.msg}
);} componentdidmount () {let loading = this.state.loading setTimeout (() => {this.setstate ({loading:! loading, msg: 'Loading Liao!' })})}}}}}}}}} (123)  
also uses setTimeout to simulate asynchronous requests, and the test results are also successful. The React section does not use the decorator to use the high-order components, not elegant enough. . . (Try the online processing method in the Create-React-App, or an error ..)
To this, how to use Loading in Vue and Reacting This ends Liao. This is a super simple version of Demo, but I hope to share it with you. After writing, I truly realized the old saying, the paper was very shallow, perceived this matter.
The above is the Loading use solution integration that Xiaobian gives you, I hope that everyone will help, if you have any questions, please leave a message, Xiaobian will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment