vue做搜索列表如何让列表下拉无线加载

Question

用mint-ui做搜索

效果如图，我想实现让搜索出来的结果列表为分页，即无限下拉加载更多，给搜索框绑定了search事件，但是，mint-ui的loadmore事件还要绑定在搜索列表的外层div上，目前我分开写了两个方法，但是loadmore方法好像只是刚开始生效，等搜索列表搜索出来之后就不生效了，也就是不会加载更多，所以请大神帮忙看看，我该怎么改改
代码如下：

<template>
    <div>
      <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)">
        <div v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
          <ListItem :lists="lists"></ListItem>
          <div class="loading-text" v-show="{loadingTextBtn:true}"><span v-text="loadingText"></span><mt-spinner v-show="{loadingComplete:false}" type="snake" :size="10"></mt-spinner></div>
        </div>
      </mt-search>
    </div>
</template>
<script>
import axios from 'axios'
import ListItem from './ListItem.vue'
export default{
    name:"Search",
    components:{
      ListItem
    },
    data(){
        return{
          value:"",
          lists:[],
          page:0,
          size:10,
          loadingTextBtn:false,
          loadingText:"努力加载中",
          loadingComplete:false
        }
    },
    methods:{
      search(value){
          axios.get("/news/search",{withCredentials:true,params:{q:value,page:this.page,size:this.size}}).then(res=>{
            this.lists=res.data.content;
            console.log(this.lists);
          })
      },
      loadMore() {
        console.log(this.value);
        this.loading = true;
        this.loadingTextBtn=true;
        setTimeout(() => {
          this.page++;
          if(this.page<=this.totalPages){
            axios.get("/news/search",{withCredentials:true,params:{q:this.value,page:this.page,size:this.size}}).then(res=>{
              this.lists=res.data.content;
              console.log(this.lists);

            })
          }else{
            this.loadingText="已全部加载完成";
            this.loadingComplete=true;
          }
          this.loading = false;
        }, 2500);
      }
    }
}
</script>

Answer 1

问题已经解决this.lists=res.data.content; 新闻列表不能直接替换，而应该是concat拼接，换成：

this.lists=this.lists.concat(res.data.content);
就可以了

Answer 2

loading没有在初始化的时候定义

Answer 3

我这边使用Infinite scroll会自动触发一次（并没有滑动），是我哪里配置有问题嘛？