Home > Web Front-end > JS Tutorial > body text

Vue infinite loading vue-infinite-loading usage detailed explanation

php中世界最好的语言
Release: 2018-05-02 09:39:43
Original
4245 people have browsed it

This time I will bring you a detailed explanation of the use of Vue infinite loading vue-infinite-loading, Vue infinite loading vue-infinite-loading What are the precautions, the following is a practical case, let's take a look .

This article introduces the infinite loading method of vue-infinite-loading in Vue and shares it with everyone. The details are as follows:

Note: vue-infinite-loading2.0 can only be used in Vue.js2 used in .0. If you want to use it in Vue.js1.0, please install vue-infinite-loading1.3 version

How to install

npm install vue-infinite-loading --save
Copy after login

Import method

es6 module import method

import InfiniteLoading from 'vue-infinite-loading';
export default {
 components: {
  InfiniteLoading
 },
};
Copy after login

CommonJS module import method

const InfiniteLoading = require('vue-infinite-loading');
export default {
 components: {
   InfiniteLoading
 }
};
Copy after login

Other methods

<script src="vue-infinite-loading.js"></script>
Copy after login

Apply in the page

Declare directly in the component

components:{
  InfiniteLoading
}
Copy after login

Template part

<infinite-loading @infinite="infiniteHandler">
  <span slot="no-more">
     我们是有底线的
  </span>
</infinite-loading>
Copy after login

js part

Automatically trigger infiniteHandler when scrolling to the bottom Event

infiniteHandler($state) {
     setTimeout(() => {
       const temp = [];
       for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
         temp.push(i);
       }
       this.list = this.list.concat(temp);
       $state.loaded();
       $state.complete();
     }, 1000);
}
Copy after login

Note

If you still use
this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
A warning will appear, telling you that it has been modified to use this method to pass parameters into $state.

Properties

distance: This is the critical value for scrolling. If the distance to the bottom of the scrolling parent element is less than this value, then infiniteHandlerCallback function will be called.

<infinite-loading @infinite="infiniteHandler" distance="Number">
</infinite-loading>
Copy after login

spinner: With this attribute, you can choose one of your favorite spinners as the loading animation.
spinner="bubbles";
1、bubbles
2、circles
3、default
4、spiral
5、waveDots

<infinite-loading @infinite="infiniteHandler" spinner="String">
</infinite-loading>
Copy after login

direction : If you set this property to top, then this component will call the infiniteHandler function when you scroll to the top.

Warning: You must manually set the scrollTop of the scroll parent element to the correct value after the data is loaded, otherwise, the component will call the infiniteHandler function again and again.

direction="top"

<infinite-loading @infinite="infiniteHandler" direction="String">
</infinite-loading>
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of using webpack module hot replacement

Detailed explanation of cross-domain use of proxyTable proxy

The above is the detailed content of Vue infinite loading vue-infinite-loading usage detailed explanation. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template