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>

最后编辑于：2020.04.03 15:33:06