滚动条下拉进行分页请求数据

需求说明 一个公告页面，如果一次性请求所有数据必定会造成页面卡顿，
所以将接口设置成分页模式，按照每页请求

<a-list item-layout="horizontal" 
:data-source="data"  class="list"
@scroll.passive="getScroll($event)">
	<a-list-item slot="renderItem" slot-scope="item" @click="godetail(item.id)" style="cursor:pointer;">
	  <a-list-item-meta :description="item.butitle">  
	    <a slot="title">公告 <span>{{ item.createtime }}</span></a>
	    <a-avatar slot="avatar" :src="item.url"/>
	  </a-list-item-meta>
	</a-list-item>
</a-list>

data中的数据设置

data() {
    return {
      data: [],
      st:1,
      limit:10,
      LazyLoding:true,
    };
  },

script中的数据设置

get_bull_list(){
   this.$api.get('/api/showmessage/selectGonggTitle?state=true&st='+this.st+"&limit="+this.limit)
   .then(res=>{
     let code = res.code;
     if(code ==0){
       let data = res.data;
       if(this.st >1){
         this.LazyLoding = true;
         this.data = this.data.concat(data);
       }else{
       //通过lazyLoading控制是否继续请求加载数据
         this.LazyLoding = true;
         this.data = data;
       }
       if(!data|| data.length == 0){
         this.LazyLoding = false;
       }           
     }
   })
 },
      
//监听滚动条 分页加载 将方法写在滚动条的dom中
getScroll(event){
 //  滚动条距离底部的距离scrollBottom
   let scrollBottom =
     event.target.scrollHeight -
     event.target.scrollTop -
     event.target.clientHeight
   if (scrollBottom <= 10) {
     if(this.LazyLoding){
       this.LazyLoding = false;
       this.st += 1
       this.get_bull_list();
     }
   }      
},