vue mintui-Loadmore combines pull-down refresh and pull-up loading example

<template> 
 <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}"> 
  <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore"> 
   <ul class="list" v-for="(val, key) in pageList"> 
    <li> 
     <div>I'm a little11</div> 
     <div>I'm a little11</div> 
    </li> 
   </ul> 
  </v-loadmore> 
 </div> 
</template> 
<script> 
 import {Loadmore} from 'mint-ui'; 
 export default { 
  data:function() { 
   return { 
    searchCondition:{ //Pagination properties     pageNo:"1", 
     pageSize:"10" 
    }, 
    pageList:[], 
    allLoaded: false, //Is it possible to pull up the property? False can pull up. True is to prohibit pulling up, which means that data is not loaded by scratching up.    scrollMode:"auto" //The elastic scrolling effect of the mobile terminal, touch is elastic scrolling, auto is non-elastic scrolling   } 
  }, 
  components: { 
   'v-loadmore':Loadmore // Alias ​​the component. Vue will not be case sensitive when converting template tags. For example, loadMore tags will become loadmore after conversion, which is prone to some matching problems.               // When applying components, it is recommended to use a-b form to name it  }, 
  mounted(){ 
   (); //First access query list  }, 
  methods: { 
   loadTop:function() { //The pull-down trigger method provided by the component    //Drop load    (); 
    this.$();// Fixed method, it needs to be called once after query, and is used to reposition   }, 
   loadBottom:function() { 
    // Pull-up load    ();// Pull-up triggered pagination query    this.$();// Fixed method, it needs to be called once after query, and is used to reposition   }, 
   loadPageList:function (){ 
     // Query data    ().then(data =>{ 
     // Is there a next page? Add a method to judge whether there is no next page. Pull-up is prohibited     (); 
      = ; 
     this.$nextTick(function () { 
      // The original meaning is that the delayed callback function is called at the end of the DOM update loop. The general meaning is that the DOM element needs to be modified for some reason and can only be written after modifying certain data.      // The reason for adding here is that there is a pit. When using the -webkit-overflow-scrolling property, it will block the loadmore's pull-up loading effect when the mobile side is elastic scrolling effect.      // It took a long time to solve this problem, just use this function, which means to set the attribute to auto first, slide normally, and change it to elastic sliding after loading the data. There is no such problem on Android, and the elastic sliding experience on the mobile side will be better       = "touch"; 
     }); 
    }); 
   }, 
   more:function (){ 
     // Pagination query     = parseInt() + 1; 
    ().then(data=>{ 
      = (); 
     (); 
    }); 
   }, 
   isHaveMore:function(isHaveMore){ 
    // Is there a next page? If not, pull-up and refresh are prohibited     = true; //true is prohibited from pull-up loading    if(isHaveMore){ 
      = false; 
    } 
   } 
  } 
 } 
</script>