vue mintui-Loadmore結(jié)合實現(xiàn)下拉刷新和上拉加載示例

<template> 
 <div class="main-body" :> 
  <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>我是小11</div> 
     <div>我是小11</div> 
    </li> 
   </ul> 
  </v-loadmore> 
 </div> 
</template> 
<script> 
 import {Loadmore} from 'mint-ui'; 
 export default { 
  data:function() { 
   return { 
    searchCondition:{ //分頁屬性 
     pageNo:"1", 
     pageSize:"10" 
    }, 
    pageList:[], 
    allLoaded: false, //是否可以上拉屬性，false可以上拉，true為禁止上拉，就是不讓往上劃加載數(shù)據(jù)了 
    scrollMode:"auto" //移動端彈性滾動效果，touch為彈性滾動，auto是非彈性滾動 
   } 
  }, 
  components: { 
   'v-loadmore':Loadmore // 為組件起別名，vue轉(zhuǎn)換template標簽時不會區(qū)分大小寫，例如：loadMore這種標簽轉(zhuǎn)換完就會變成loadmore，容易出現(xiàn)一些匹配問題 
               // 推薦應用組件時用a-b形式起名 
  }, 
  mounted(){ 
   this.loadPageList(); //初次訪問查詢列表 
  }, 
  methods: { 
   loadTop:function() { //組件提供的下拉觸發(fā)方法 
    //下拉加載 
    this.loadPageList(); 
    this.$refs.loadmore.onTopLoaded();// 固定方法，查詢完要調(diào)用一次，用于重新定位 
   }, 
   loadBottom:function() { 
    // 上拉加載 
    this.more();// 上拉觸發(fā)的分頁查詢 
    this.$refs.loadmore.onBottomLoaded();// 固定方法，查詢完要調(diào)用一次，用于重新定位 
   }, 
   loadPageList:function (){ 
     // 查詢數(shù)據(jù) 
    this.api.PageList(this.searchCondition).then(data =>{ 
     // 是否還有下一頁，加個方法判斷，沒有下一頁要禁止上拉 
     this.isHaveMore(data.result.haveMore); 
     this.pageList = data.result.pageList; 
     this.$nextTick(function () { 
      // 原意是DOM更新循環(huán)結(jié)束時調(diào)用延遲回調(diào)函數(shù)，大意就是DOM元素在因為某些原因要進行修改就在這里寫，要在修改某些數(shù)據(jù)后才能寫， 
      // 這里之所以加是因為有個坑，iphone在使用-webkit-overflow-scrolling屬性，就是移動端彈性滾動效果時會屏蔽loadmore的上拉加載效果， 
      // 花了好久才解決這個問題，就是用這個函數(shù)，意思就是先設(shè)置屬性為auto，正?；瑒樱虞d完數(shù)據(jù)后改成彈性滑動，安卓沒有這個問題，移動端彈性滑動體驗會更好 
      this.scrollMode = "touch"; 
     }); 
    }); 
   }, 
   more:function (){ 
     // 分頁查詢 
    this.searchCondition.pageNo = parseInt(this.searchCondition.pageNo) + 1; 
    this.api.loadPageList(this.searchCondition).then(data=>{ 
     this.pageList = this.pageList.concat(data.result.pageList); 
     this.isHaveMore(data.result.haveMore); 
    }); 
   }, 
   isHaveMore:function(isHaveMore){ 
    // 是否還有下一頁，如果沒有就禁止上拉刷新 
    this.allLoaded = true; //true是禁止上拉加載 
    if(isHaveMore){ 
     this.allLoaded = false; 
    } 
   } 
  } 
 } 
</script>