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

原创已于 2023-03-02 13:18:43 修改 · 450 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-02-24 14:07:08 首次发布

该代码示例展示了如何在Vue.js应用中处理滚动事件以实现无限滚动加载。当用户滚动到底部时，数据会按页码分批加载，直到没有更多数据时显示提示信息。

代码块

<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);
      });
    },
}