Preface
Hello friends. If you have read through my Vue.js series, you should have grasped the basics of this framework pretty much. No more long and roundabout. Today I continue to share a UI set to use with Vue.js with a very simple function and implemented with Vue.js which is Loading Infinity. Something that people encounter everyday when using facebook or on social networking sites. At first, I thought this loading style was very magical, but when I try to refresh it is very easy [email protected] !
Let’s go to the post
1. Things you need
- Element: This article I will use and introduce to you a very famous ui set and commonly used with Vue.js which is Element UI. Although I have not used all the tools in this UI set, but at first glance I see this UI set is quite beautiful as well as very professional.
This interface set is almost full of things that we need to work with a lot of supportive Components. Of course if there is a need to do something special, we also have to code by hand.
The latest version is currently 2.13.2. You look to the left sidebar of the Component tab, you will see a lot of Components available such as DatePicker, Icons, Buttons, Links, … With our self-learning spirit, I think everything in this should go to the homepage. to explore and explore is the best !! https://element.eleme.io/
- and VueJS: As a topic, VueJS will be an indispensable part of this series. Here if you have never used VueJS can go back to the previous articles in the series to read the basics and come back to practice (many thanks!)
2. And try enough
Let’s go to installation and let’s do it.
If you are working on a project and just want to add functionality, skip this installation step
Setting :
Step 1: I will use VueCLI to create a new project with Vue. Everything about the CLI installation is invited once again to check out my previous posts !!
Step 2: Next, we will install Element into Vue by command:
1 2 | npm i element-ui -S |
import into the main.js file for use with Vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span> <span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App.vue'</span> <span class="token keyword">import</span> ElementUI <span class="token keyword">from</span> <span class="token string">'element-ui'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'element-ui/lib/theme-chalk/index.css'</span> <span class="token punctuation">;</span> Vue <span class="token punctuation">.</span> <span class="token function">use</span> <span class="token punctuation">(</span> ElementUI <span class="token punctuation">)</span> <span class="token punctuation">;</span> Vue <span class="token punctuation">.</span> config <span class="token punctuation">.</span> productionTip <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token function-variable function">render</span> <span class="token operator">:</span> <span class="token parameter">h</span> <span class="token operator">=></span> <span class="token function">h</span> <span class="token punctuation">(</span> App <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">$mount</span> <span class="token punctuation">(</span> <span class="token string">'#app'</span> <span class="token punctuation">)</span> |
Step 3: CODE
In components / List.vue I will execute the component code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> infinite-list-wrapper <span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span> <span class="token punctuation">="</span> <span class="token attr-value"><span class="token property">overflow</span> <span class="token punctuation">:</span> auto</span> <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ul</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> list <span class="token punctuation">"</span></span> <span class="token attr-name">v-infinite-scroll</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> load <span class="token punctuation">"</span></span> <span class="token attr-name">infinite-scroll-disabled</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> disabled <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> li</span> <span class="token attr-name">v-for</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> i in dataToShow <span class="token punctuation">"</span></span> <span class="token attr-name">:key</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> i.id <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> list-item <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> {{ `Bài ${i.id}: ${i.body}` }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> li</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ul</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> p</span> <span class="token attr-name">v-if</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> loading <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Loading... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> p</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> p</span> <span class="token attr-name">v-if</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> noMore <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> No more <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> p</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> template</span> <span class="token punctuation">></span></span> |
The main template I use Element is only for directive v-infinite-scroll and infinite-scroll-disabled. Also you can install v-infinite-scroll separately without using Element via npm (using Element here just wants to introduce you to this set of quite useful tools: v)
Script part:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <span class="token operator"><</span> script <span class="token operator">></span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">data</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> data <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> dataToShow <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> loading <span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">,</span> index <span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">,</span> limit <span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">,</span> noMore <span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> computed <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">disabled</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> loading <span class="token operator">||</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> noMore <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> methods <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">load</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> loading <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token function">setTimeout</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> data <span class="token punctuation">.</span> length <span class="token operator">></span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> dataToShow <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> dataToShow <span class="token punctuation">.</span> <span class="token function">concat</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> data <span class="token punctuation">.</span> <span class="token function">splice</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> index <span class="token punctuation">,</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> limit <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> loading <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> loading <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> noMore <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token number">500</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token function">mounted</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">fetch</span> <span class="token punctuation">(</span> <span class="token string">'https://jsonplaceholder.typicode.com/posts'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">response</span> <span class="token operator">=></span> response <span class="token punctuation">.</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> data <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> data <span class="token operator">=</span> data <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> dataToShow <span class="token operator">=</span> data <span class="token punctuation">.</span> <span class="token function">splice</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> index <span class="token punctuation">,</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> limit <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">//init</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> script <span class="token operator">></span> |
The above code is just the most basic things that we have read about in the previous articles plus a fetch method to get data from api. As I see, usually loading data will not load all to perform this loading infinity function, but instead we will apply to load paged data and load each page there (Lazy Loading). If you are interested and do not know how to do this, leave a comment below. Maybe if I’m free, I will have a post about lazy loading
Here the algorithm is also quite simple, first I load all the data from the api, we will initialize the first time without scrolling the mouse with the initial data (init) of 3 records (using splice and save in the state dataToShow Next each time we scroll the mouse, we will continue to split the original data loaded and retrieve 3 more records to join this dataToShow state.And we just keep separating the data until the state data is not. For more data, we will stop and change state loading = false as well as change state noMore to true. So we have a complete infinity loading function.
Achievement:
3. Conclusion
With this article, my main purpose is to introduce to you a set of delicious and inexpensive tools that are Element as well as the application to do a simple function. Hope to help newcomers to better grasp their knowledge to start working with the Vue.js. framework. See you all in the following articles. Thank you for watching the series and to the end of this post !!!