Infinite loading vue-infinite-loading method in Vue-JS Tutorial-php.cn

Infinite loading vue-infinite-loading method in Vue

亚连

Release： 2018-05-26 09:50:37

Original

2011 people have browsed it

This article mainly introduces the vue-infinite-loading method of infinite loading in Vue. Now I share it with you and give it as a reference.

This article introduces the method of infinite loading 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 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

Copy after login

Import method

es6 module import method

import InfiniteLoading from &#39;vue-infinite-loading&#39;;
export default {
 components: {
  InfiniteLoading
 },
};

Copy after login

CommonJS module import method

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

Copy after login

Other ways

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

Copy after login

##On page In the application

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

The infiniteHandler event is automatically triggered when scrolling to the bottom

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 scroll parent element is less than this value, the infiniteHandler callback 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 scrolling 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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. help.

How ajax in jquery returns results instead of callbacks, that is, executed in the same order

##vue Summary of several problems encountered when processing data obtained by storejs

Solution to the problem that the webpack local development environment cannot be accessed by IP

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