vue2.0 Unlimited scroll Load Data plugin

Do Vue project with the drop-down scrolling load data function, because the selected UI library (element) does not have this component, the use of vue-infinite-loading this plug-in instead, using some of the problems encountered in the use of methods, summarized as a record!

Installation: NPM Install Vue-infinite-loading–save

Introduced

ES6

 from ' vue-infinite-loading '  Default  {components  : {    infiniteloading,  },};

CommonJS

Const Infiniteloading = require ('vue-infinite-loading'default  {  Components: {    infiniteloading,  },};

1. Usage one (basic usage)

Template

<div>  <p vfor ='item in list'> Line    :    < Span v-text="item"></span>  </p>  <!-- Infinite-loading This component to be placed at the bottom of the list, scrolling inside the box! --  <infinite-loading @infinite ="infinitehandler"></ Infinite-loading></div>

Script

Import infiniteloading from 'vue-infinite-loading'; exportdefault{data () {return{list: [],}; }, Methods: {Infinitehandler ($state) {setTimeout (()= {        Consttemp = [];  for(Let i = This. List.length +1; I <= This. List.length + -; i++) {Temp.push (i); }         This. List = This. List.concat (temp);      $state. Loaded (); },  +); }, the components: {infiniteloading,},};

2. Usage II (General paging data)

Template

<divclass="hacker-news-list"> <ul> <liclass="Hacker-news-item"V- for="(item, key) in list"></li> </ul> <infinite-loading @infinite ="Infinitehandler"> <span slot="No-more">there isno more Hacker News</span> </infinite-loading></div>

Script

Import infiniteloading from 'vue-infinite-loading'; import Axios from 'Axios'; exportdefault{data () {return{list: [],}; }, Methods: {Infinitehandler ($state) {ConstApi="http://xxxx.com/xxx"Axios.Get(API, {//API requests data addresses for you        params: {page: This. List.length/Ten+1,//page parameters (10 per page)},}). Then ((response)= {        if(response.data.length) { This. List = This. List.concat (Response.data);//Response.data the list of arrays returned for you to request the interface$state. Loaded (); if( This. List.length/Ten===Ten{$state. complete ();//here is the load of 10 pages of data, set not in the load          }        } Else{$state. complete ();    }      }); }, the components: {infiniteloading,},};

$state: The component passes a special event parameter $state to the event handler to change the load state.
$state parameters include three methods, which are the loaded method, the complete method, and the Reset method.

• The loaded method stops the animation after each load of data, and then the component is ready for the next trigger.
• The complete method is used to complete an infinite load, and the component will no longer handle any scrolling operations. If the method is never called when the complete method is called by loaded, this component displays the user's no result message, if it is not, the user message no longer appears, and other content can be set by slot
• The Reset method is to return the component to its original state

3. Use three

The General infinite scrolling drop-down load data is filtered. For example, choose a list based on different conditions, or change a state to re-render the list.

Template

<divclass="hacker-news-list"> <divclass="Hacker-news-header"> <!--dropdown change--<SelectV-model="Tag"@change ="Changefilter ()"> <option value=" Story">Story</option> </Select> <!--or click to change-<button @click ="Changefilter ()"> Search </button> </div> <ul> <liclass="Hacker-news-item"V- for="(item, key) in list"></li> </ul> <infinite-loading @infinite ="Infinitehandler" ref="infiniteloading"> <!--Don't forget to set thisref="infiniteloading"-<span slot="No-more">there isno more Hacker News</span> </infinite-loading></div>

Script

Import infiniteloading from 'vue-infinite-loading'; import Axios from 'Axios'; exportdefault{data () {return{list: [], Tag:' Story',    }; }, Methods: {Infinitehandler ($state) {ConstApi="http://xxxx.com/xxx"Axios.Get(API, {//API requests data addresses for you        params: {Tags: This. Tag,//changing the condition parametersPage This. List.length/Ten+1,},}). Then (({data})= {        if(data.hits.length) { This. List = This. List.concat (data.hits);          $state. Loaded (); if( This. List.length/ -===Ten{$state. complete (); }        } Else{$state. complete ();    }      }); },    //Change the condition bar with this methodChangefilter () { This. List = [];  This. $nextTick (() = {         This. $refs. infiniteloading. $emit ('$InfiniteLoading: Reset');    }); }, the components: {infiniteloading,},};

4. Other usage (Special conditions manual trigger)

In most cases, we want to load the data for an empty list immediately, which is also the default behavior for that component. If you only want to control the first load, you can simply use the v-if and v-else instructions to implement it, but if, in some complicated cases, we need to manually load the data every three pages, we can use this method,

I don't do a detailed introduction here. You can take a look at this. Official documents: vue-infinite-loading

vue2.0 Unlimited scroll Load Data plugin