vant 瀑布流滚动加载(搜索时onload不触发无法实现滚动加载)

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

一、需求以及问题：

需求：最近做了一个手机端页面 一个列表页面需要实现瀑布流滚动加载（并且列表的最上边还有一个搜索功能）；
问题：用vant-ui 的vant-list实现了瀑布流滚动加载，但是列表上边的搜索功能如果搜索出来的数据多的话无法显示 瀑布流滚动加载

微信截图_20200403152126.png

二、实现代码

 <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">暂无数据</div>
   </div>
<script>
new Vue({
         el: '#app',
         data: function() {
           return { 
               fitStoreList: [],
               loading: false,//vant-ui框架里必须的
               finished: false,//vant-ui框架里必须的
               pageNumber:0,//第几页
               pageSize:10,//每页显示的条数
               keyWord:""//搜索绑定的字段

           }
         },
         watch: {
           // 监听 keyWord 如果keyWord 发生变化 那么需要重置数据，此处很重要
           keyWord(newName, oldName) {
                 this.pageNumber=0;
                 this.pageSize=10;
                 this.fitStoreList=[]
             }
         },
methods: {
        //搜索 这个是实现搜索数据后瀑布流滚动加载的关键
           searchHandle(){
             this.loading = true;//下拉加载中
             this.finished = false;//下拉结束
             if(this.loading){
                 this.loadingData();
             }
           },
         loadingData(){
             this.pageNumber++;
             var postData = {//列表数据接口的传参
                 "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;//数据请求回来后要关闭loading
                   if(response.data.Data.length!=0){
//如果请求出来有数据就把请求回来的数据合并到当前的 fitStoreList里
                       this.fitStoreList=this.fitStoreList.concat(response.data.Data)
                    }else{
                      //如果请求回来的没有数据了那么就不再请求接口
                      this.finished = true;
                    }
               }else{
                   this.fitStoreList=[]
               }
              
           }, function (err) {
           });
          }
}
})
</script>