參考文章地址：https://blog.csdn.net/zjKnows/article/details/103911281

一、需求以及問題：

需求：最近做了一個(gè)手機(jī)端頁面 一個(gè)列表頁面需要實(shí)現(xiàn)瀑布流滾動(dòng)加載（并且列表的最上邊還有一個(gè)搜索功能）；
問題：用vant-ui 的vant-list實(shí)現(xiàn)了瀑布流滾動(dòng)加載，但是列表上邊的搜索功能如果搜索出來的數(shù)據(jù)多的話無法顯示 瀑布流滾動(dòng)加載

微信截圖_20200403152126.png

二、實(shí)現(xiàn)代碼

 <div id="app" >
     <van-search v-model="keyWord" placeholder="請(qǐng)輸入搜索關(guān)鍵詞" @search="searchHandle"></van-search>
        <van-list
 v-model="loading"
 :finished="finished"
 finished-text="沒有更多了"
 @load="loadingData"
>
 <van-cell v-for="item in fitStoreList" :key="item.StoreId" :title="item.StoreName"></van-cell>
 <div v-if="fitStoreList.length==0" class="noData">暫無數(shù)據(jù)</div>
   </div>
<script>
new Vue({
         el: '#app',
         data: function() {
           return { 
               fitStoreList: [],
               loading: false,//vant-ui框架里必須的
               finished: false,//vant-ui框架里必須的
               pageNumber:0,//第幾頁
               pageSize:10,//每頁顯示的條數(shù)
               keyWord:""http://搜索綁定的字段

           }
         },
         watch: {
           // 監(jiān)聽 keyWord 如果keyWord 發(fā)生變化 那么需要重置數(shù)據(jù)，此處很重要
           keyWord(newName, oldName) {
                 this.pageNumber=0;
                 this.pageSize=10;
                 this.fitStoreList=[]
             }
         },
methods: {
        //搜索 這個(gè)是實(shí)現(xiàn)搜索數(shù)據(jù)后瀑布流滾動(dòng)加載的關(guān)鍵
           searchHandle(){
             this.loading = true;//下拉加載中
             this.finished = false;//下拉結(jié)束
             if(this.loading){
                 this.loadingData();
             }
           },
         loadingData(){
             this.pageNumber++;
             var postData = {//列表數(shù)據(jù)接口的傳參
                 "Id": , 
                 "PageNumber":this.pageNumber,
                  "PageSize":this.pageSize,
                  "KeyWord":this.keyWord 
            };
           this.$http.post(
               "/test/testlist",//接口地址
               postData,
               { emulateJSON: true }
           ).then(function (response) {
               if(response.data.IsSuccess){
                 this.loading = false;//數(shù)據(jù)請(qǐng)求回來后要關(guān)閉loading
                   if(response.data.Data.length!=0){
//如果請(qǐng)求出來有數(shù)據(jù)就把請(qǐng)求回來的數(shù)據(jù)合并到當(dāng)前的 fitStoreList里
                       this.fitStoreList=this.fitStoreList.concat(response.data.Data)
                    }else{
                      //如果請(qǐng)求回來的沒有數(shù)據(jù)了那么就不再請(qǐng)求接口
                      this.finished = true;
                    }
               }else{
                   this.fitStoreList=[]
               }
              
           }, function (err) {
           });
          }
}
})
</script>