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

一、需求以及問題：

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

微信截圖_20200403152126.png

二岔留、實現(xiàn)代碼

 <div id="app" >
     <van-search v-model="keyWord" placeholder="請輸入搜索關鍵詞" @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: {
        //搜索 這個是實現(xiàn)搜索數(shù)據(jù)后瀑布流滾動加載的關鍵
           searchHandle(){
             this.loading = true;//下拉加載中
             this.finished = false;//下拉結束
             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ù)請求回來后要關閉loading
                   if(response.data.Data.length!=0){
//如果請求出來有數(shù)據(jù)就把請求回來的數(shù)據(jù)合并到當前的 fitStoreList里
                       this.fitStoreList=this.fitStoreList.concat(response.data.Data)
                    }else{
                      //如果請求回來的沒有數(shù)據(jù)了那么就不再請求接口
                      this.finished = true;
                    }
               }else{
                   this.fitStoreList=[]
               }
              
           }, function (err) {
           });
          }
}
})
</script>