vue页面实现盒子内滚动加载分页数据

代码块

<div class="box" @scroll="handleScroll"></div>
<div v-if="noMore">没有更多啦~</div>

data(){
	return{
	  setTime:null,
      noMore:false,
      list:[],
      page:{
      	page_no:1,
      	totalPage:1,
      	page_size:10
	  }
	}
},
methods:{
	 handleScroll(e){
      const { scrollTop, clientHeight, scrollHeight } = e.target;
      if (scrollTop + clientHeight === scrollHeight) {
        if (this.setTime) return;
        if (this.page.page_no < this.page.totalPage) {
          this.setTime = setTimeout(() => {
            this.page.page_no+=1
            this.noMore=false
            // 获取数据
            this.getData();
            this.setTime = null;
          }, 500);
        }else{
          this.noMore=true
        }
      }
    },
    //获取数据
    getData() {
      if (this.page.page_no == 1) {
        this.list = [];
      }
      let sendData = {
        page_no: this.page.page_no,
        page_size: this.page.page_size,
      };

      this.$getData(sendData).then((res) => {
       	let data=res.data
        let totalPage = parseInt(
          res.data.page_result.total_count / this.page.page_size
        );
        if (res.data.page_result.total_count % this.page.page_size > 0) {
          totalPage = totalPage + 1;
        }
        if (!totalPage) {
          totalPage = 1;
        }
        this.page.totalPage = totalPage;
        this.list = this.list.concat(data);
      });
    },
}