How to use vue-infinite-loading to infinitely load in Vue

This time I will show you how to use vue-infinite-loading to infinitely load in Vue, and how to use vue-infinite-loading to infinitely load in Vue. take a look. Note: vue-infinite-loading2.0 can only be used in Vue.js2.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

Import method

es6 module import method

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

CommonJS module import method

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

Other methods

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

Apply in the page

Declare directly in the component

components:{
  InfiniteLoading
}

Template part

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

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);
}

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 infiniteHandler

Callback function

will be called.

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

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>

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>

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:

How to correctly solve cross-domain problems in Vue projects

How to use vue-cli axios Request method and cross-domain processing

The above is the detailed content of How to use vue-infinite-loading to infinitely load in Vue. For more information, please follow other related articles on the PHP Chinese website!