vue-quick-loadmore
A pull-down refresh and pull-up infinite scroll component for Vue.js,support to replace loading images, save and settings scrolling distance and so on
The default style is as follows, you can change the loading picture or text according to the status.
Install
npm install vue-quick-loadmore -S
// how to use
import Vue from 'vue';
import VueQuickLoadmore from 'vue-quick-loadmore';
Vue.use(VueQuickLoadmore)
Use
<!-- Note: quick-loadmore requires an outer wrapper (this example #app) The height is fixed and overflow: hidden, and the height of the internal data of quick-loadmore is greater than the height of the package container.To trigger the pull-load function of quick-loadmore --> {{index}}
name: "Message" { return dataList: 1 2 3 4 5 ; } // Implement the go to the details page to return to the list location function - with keep-alive { // if enter detail if toname === "MessageDetail" // Get scrolling distance let scrollTop = this$refsvueLoad; // Setting the cache sessionStorage; else // remore the cache sessionStorage; ; } { let scrollTop = sessionStorage; // where from ? if scrollTop == null console; else // need record -- scroll this$refsvueLoad; } { } methods: { // pull-down refresh // mock data ; } { // status change const TOPSTATUS = wait: "wait" pulling: "pulling" limit: "limit" loading: "loading" ; console; } { // status change const BOTTOMSTATUS = wait: "wait" loading: "loading" nodata: "nodata" ; console; } { // pull-up infinite // mock data ; } { // console.log("mounted"); };
Pull-down options
params | type | description | note |
---|---|---|---|
v-bind:disableTop | Boolean | Disable pull-down refresh | default:false |
v-bind:distanceIndex | Number | Scrolling ratio | default:2 |
v-bind:topLoadingDistance | Number | Loading distance | default:50 |
v-bind:topDistance | Number | Pull-down refresh trigger value | default:100 |
v-on:topMethod | Function | Pull-down refresh trigger method | |
v-on:topStatusChange | Function | Pull-down status change | look for example |
ref.onTopLoaded | Function | Pull-down complete | use ref api |
Pull-up options:
params | type | description | note |
---|---|---|---|
v-bind:disableBttom | Boolean | Disable pull-up | default:false |
v-bind:bottomDistance | Number | Loading distance | default:10 |
v-on:bottomMethod | Function | Pull-up trigger method | |
v-on:bottomStatusChange | Function | Pull-up status change | look for example |
ref.onBottomLoaded(boolean = true) | Function | Pull-up complete | use ref api |
Other options:
params | type | description | note |
---|---|---|---|
ref.getScrollTop | Function | get scroll distance | look for example |
ref.setScroolTop(y) | Function | scroll to distance | look for example |
How to replace loading image:
according to topStatusChange,change image according to bottomStatusChange,change image
Contact me
QQ:215028726