README.quick.md

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

zh-CN中文文档

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

---

<template>
    <div id="app">
    <!-- 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 -->
        <quick-loadmore :top-method="handleTop" ref="vueLoad" 
                        :top-status-change="handleStatusChange" 
                        :bottom-method="handleBottom" 
                        :bottom-status-change="handleBottomStatusChange" 
                        :disable-top="false" :disable-bottom="false">
            <div class="item" v-for="(item,index) in dataList" :key="index">{{index}}</div>
        </quick-loadmore>
    </div>
</template>

export default {
  name: "Message",
  data() {
    return {
      dataList: [1, 2, 3, 4, 5]
    };
  },
  // Implement the go to the details page to return to the list location function - with keep-alive
  beforeRouteLeave(to, from, next) {
    // if enter detail
    if (to.name === "MessageDetail") {
        // Get scrolling distance
      let scrollTop = this.$refs.vueLoad.getScrollTop();
      // Setting the cache
      sessionStorage.setItem("messageScrollTop", scrollTop);
    } else {
      // remore the cache  
      sessionStorage.removeItem("messageScrollTop");
    }
    next();
  },
  activated() {  
    let scrollTop = sessionStorage.getItem("messageScrollTop");
    // where from ?
    if (scrollTop == null) {
      console.log("不需要缓存的页面");
    } else {
     // need record -- scroll
      this.$refs.vueLoad.setScrollTop(scrollTop);
    }
  },
  deactivated() {

  },
  methods: {
    handleTop() {
      // pull-down refresh  
      // mock data
      setTimeout(() => {
        this.dataList = [1, 2, 3, 4, 5];
        // scroll to top
        this.$refs.vueLoad.onTopLoaded();
      }, 1000);
    },
    handleStatusChange(status) {
      // status change
      const TOPSTATUS = {
        wait: "wait",
        pulling: "pulling",
        limit: "limit",
        loading: "loading"
      }; 
      console.log(status, "statuschange");
    },
    handleBottomStatusChange(status) {
      // status change  
      const BOTTOMSTATUS = {
        wait: "wait",
        loading: "loading",
        nodata: "nodata"
      };
      console.log(status, "bottomchange");
    },
    handleBottom() {
      // pull-up infinite
      // mock data
      setTimeout(() => {
        this.dataList.push(1, 2, 3);
        // have more data ? false: this.$refs.vueLoad.onBottomLoaded(false))
        // scroll to bottom
        this.$refs.vueLoad.onBottomLoaded();
      }, 1000);
    }
  },
  mounted() {
    // console.log("mounted");
  }
};

*{
    margin:0;
    padding:0;
}
html,body,#app{
    height:100%;
    overflow: hidden;
}
.item{
    height:200px;
    background: lightgray;
    border:2px solid green;
    overflow: hidden;
}

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-bind:topMethod	Function	Pull-down refresh trigger method
v-bind: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-bind:bottomMethod	Function	Pull-up trigger method
v-bind:bottomStatusChange	Function	Pull-up status change	look for example
v-bind:eventScroll	Function	Scroll event callback	Used to listen for scroll events
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:

<template slot="top">
    <div>according to topStatusChange,change image</div>
</template>    
<template slot="bottom">
    <div>according to bottomStatusChange,change image</div>
</template>