vue PC端下拉触底,请求分页数据_vue中pc端滚动分页请求接口

PC端是如何触底分页请求新数据的? 这里提供的方法总共分为三个步骤

1. 在mounted中添加监听事件处理相应的方法

window.addEventListener('scroll', this.scrollBottom)
1

2. 在methods中添加事件方法,如下代码:

scrollBottom() {
		// 变量scrollTop为当前页面的滚动条纵坐标位置
        let scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        // 变量 windowHeight 是可视区的高度
        let windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        // 变量 scrollHeight 是滚动条的总高度
        let scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight;
		// 到底的条件
        if (
          scrollTop + windowHeight == scrollHeight
        ) {
		//到底后要去触发的事件
        if (this.page*10 >=this.total) return this.$message('数据加载完毕')
        if(this.isLoading)return //控制节流
        this.page++
        this.getOrderList() //请求数据
   }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3. 需要在vue的生命周期beforeDestroy中销毁移除添加的监听事件,防止报错

window.removeEventListener('scroll', this.scrollBottom)
1

完成以上步骤就完成了触底分页请求!