結合mint-ui移動端下拉加載實踐方法總結

<template>
 <div class="main-body" :>
 <v-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
  <ul class="list">

   <li v-for="(item, index) in proCopyright">
   <div>{{item.FZD_ZPMC}}</div>
   </li>

  </ul>

 </v-loadmore>

 </div>
</template>

<script>
 import {Loadmore} from 'mint-ui';
export default {
 components:{
  'v-loadmore':Loadmore,
 },
 data () {
 return {
  pageNo:1,
  pageSize:50,
  proCopyright:[],
  allLoaded: false, //是否可以上拉屬性，false可以上拉，true為禁止上拉，就是不讓往上劃加載數(shù)據了
  scrollMode:"auto", //移動端彈性滾動效果，touch為彈性滾動，auto是非彈性滾動
  totalpage:0,
  loading:false,
  bottomText: '',
 }
 },
 mounted(){
 this.loadPageList(); //初次訪問查詢列表
 },
 methods:{
 loadBottom:function() {
  // 上拉加載
  this.more();// 上拉觸發(fā)的分頁查詢
  this.$refs.loadmore.onBottomLoaded();// 固定方法，查詢完要調用一次，用于重新定位
 },
 loadPageList:function (){
  // 查詢數(shù)據
  this.axios.get('/copyright?key='+ encodeURIComponent('公司名稱')+"&mask=001"+"&page="+this.pageNo+"&size="+this.pageSize).then(res =>{
  console.log(res);
  this.proCopyright = res.data.result.PRODUCTCOPYRIGHT;
  this.totalpage = Math.ceil(res.data.result.COUNTOFPRODUCTCOPYRIGHT/this.pageSize);
  if(this.totalpage == 1){
   this.allLoaded = true;
  }
  this.$nextTick(function () {
   // 是否還有下一頁，加個方法判斷，沒有下一頁要禁止上拉
   this.scrollMode = "touch";
   this.isHaveMore();
  });
  });
 },
 more:function (){
  // 分頁查詢
  if(this.totalpage == 1){
  this.pageNo = 1;
  this.allLoaded = true;
  }else{
  this.pageNo = parseInt(this.pageNo) + 1;
  this.allLoaded = false;
  }

  console.log(this.pageNo);
  this.axios.get('/copyright?key='+ encodeURIComponent('公司名稱')+"&mask=001"+"&page="+this.pageNo+"&size="+this.pageSize).then(res=>{
  this.proCopyright = this.proCopyright.concat(res.data.result.PRODUCTCOPYRIGHT);
  console.log(this.proCopyright);
  this.isHaveMore();
  });
 },
 isHaveMore:function(){
  // 是否還有下一頁，如果沒有就禁止上拉刷新
  //this.allLoaded = false; //true是禁止上拉加載
  if(this.pageNo == this.totalpage){
  this.allLoaded = true;
  }
 }
 },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 li{
  padding:30px 0;
  background-color: #ccc;
  margin-bottom:20px;
 }
</style>