vue plug-in realizes pull-up loading and pull-down refresh on mobile terminal

npm install --save  //Do not usecnpmInstall

import MescrollVue from ‘/'

components: {
  MescrollVue // Register the mescroll component},

<mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit" class="scrollView">
</mescroll-vue>

data () {
 return {
  mescroll: null, // mescroll instance object  mescrollDown:{}, //The configuration of pull-down refresh. (If the logic of pull-down refresh and pull-up load processing is the same, then mescrollDown is not necessary)  mescrollUp: { // Pull-up loading configuration.    callback: , // Pull-up callback, abbreviation here; equivalent to callback: function(page, mescroll) { }    //The following are some commonly used configurations, of course it is OK to not write them.    page: {
      num: 0, //The current page is 0 by default, and 1 will be added before the callback; that is, callback(page) will start from 1      size: 10 //The number of data strips per page is 10 by default    },
    noMoreSize: 5, //If there is no data on the list, you can set that the total number of the list should be greater than 5 before there is no more data to display; avoid too little data on the list (such as only one data), and it will be unsightly to display without more data.    toTop: {
      //Back to top button      src: "./static/mescroll/", //Picture path, default null, support network diagram      offset: 1000 //The list scrolls 1000px before displaying Back to top button    },
    htmlContent: '<p class="downwarp-progress"></p><p class="downwarp-tip">Pull down to refresh </p>', //Layout content    empty: {
      // When there is no data on the first page of the list, the empty prompt layout is displayed; warpId must be configured to display      warpId: "xxid", //The id of the parent layout (version 1.3.5 supports passing in dom elements)      icon: "./static/mescroll/", //Icon, default null, support network diagram      tip: "No relevant data yet~" //hint    }
  },
  articleList: [] // List data }
},
beforeRouteEnter (to, from, next) { // If there is no configuration to return to the top button or isBounce, beforeRouteEnter does not need to be written  next(vm => {
   vm.$() // When entering the route, scroll to the original list position and restore to the configuration of the top button and isBounce  })
},
beforeRouteLeave (to, from, next) { // If there is no configuration back to the top button or isBounce, beforeRouteLeave does not need to be written  this.$() // When exiting the route, record the scrolling position of the list, hide back to the top button and isBounce configuration  next()
},
methods: {
 mescrollInit(mescroll) {
    = mescroll;
 },
 upCallback(page, mescroll) {
  this.$Request({
    url: "",
    method: "get",
    data: {
     page: 
    },
    success: res => {
     if ( == 1) {
      let data =  == 1 ? [] : ;
      (...);
       = data;
      // After the data rendering is successful, hide the state of pull-down refresh      this.$nextTick(() => {
       ();
      });
     }
    }
  });
 }
 }
}

.mescroll {
  position: fixed;
  padding-bottom: 1rem;
  top: 2px;
  bottom: 0;
  height: auto;
}

htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">loading..</p>', //Layout in pull-up loadinghtmlNodata: '<p class="upwarp-nodata">-- END --</p>', //Data-free layout

-webkit-overflow-scrolling:touch;