vue加载更多

一、原生方法

data(){
	pageInfo:{
	     page:1,
	     loading:false,
	     is_last:0,
	     footerText:'',
	     complete:false
	 },
}

created() {
   this.getList();
   this.winScroll();
},

methods

async getList() {
    let that = this;
     let params = {
         passport: localStorage.getItem('passport'),
         page: this.pageInfo.page,
         limit:10
     }
     if(this.ajaxing){
         return;
     }else{
         this.ajaxing=true;
     }
     const response = await this.postRequest(api.complainList(), params);
     if (response) {
         this.ajaxing=false;
         if (response.status == 200) {
             that.pageInfo.is_last=response.data.is_last;
             console.log(that.pageInfo.is_last,'page');
             that.complainList=that.complainList.concat(response.data.data) ;
             if(that.complainList.length>0){
                 if(that.pageInfo.is_last==0){
                     that.pageInfo.loading = false;
                     that.pageInfo.complete=true;
                     that.pageInfo.footerText = "加载完成";
                     setTimeout(function(){
                         that.pageInfo.complete=false;   
                     },500)
                     $(window).unbind('scroll');
                     return;
                 }
                 //else{
                     //that.pageInfo.page++;
                 //}    
                 that.noData=false;
             }else{
                 that.noData=true;
             }
         } else {
             that.$toast(response.message);
             
         }
     }
 },
winScroll() {
     var self=this;
      $(window).scroll(function () {
         let scrollTop = $(window).scrollTop();
         let windowTop = $(window).height();
         let documentTop = $(document).height();
         if(documentTop - windowTop - scrollTop < 200){ 
             self.pageInfo.loading = true;
             that.pageInfo.page++;
             self.getList();
         }  
     })      
 },

二、vant
html

 <van-list
      v-model="pageinfo.loading"
      :finished="pageinfo.finished"
      finished-text="没有更多了"
      @load="initList"
  >
  	<div>需要加载的列表</div>
  </van-list>

data

 pageinfo:{
  	total:'',
   page:1,
   loading: false,
   finished: false
},

js

initList(){
       var url="answer/forum-posts/list";
       var obj={
           token:this.$route.query.token,
           page:this.pageinfo.page,
           count:5,
           thread_id:this.$route.query.threadId
       }
       var _this=this;
       setTimeout(() => {
           post_forum(url,obj,function(res){
               _this.list=_this.list.concat(res.data.list);
               _this.pageinfo.loading = false;
               if(res.data.total==0){
                   _this.noData=true;
               }else {
                   if(res.data.total == _this.list.length){
                       _this.pageinfo.loading = false;
                       _this.pageinfo.finished = true;
                   }else{
                       _this.pageinfo.page++;
                   }
               }
           })
       },500)
   },