如何判断页面滑到了屏幕最底部

缺乏、安全感 2023-06-27 03:22 17阅读 0赞

# 如何判断页面滑到了屏幕最底部 #

项目中经常会遇到列表页，为了保证用户体验，我们都会用到上拉加载的技术，保持用户体验，如何判断页面滑到了屏幕最底部是较为关键的一步：具体实现：

**created:**

created(){ 
       	window.onscroll = function(){ 
       		// scrollTop是滚动条滚动时，距离顶部的距离
       		var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
       		// windowHeight是可视区的高度
       		var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
       		// scrollHeight是滚动条的总高度
       		var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
                   // 滚动条到底部
                   if(scrollTop+windowHeight==scrollHeight){ 
                    // 到了底部之后想做的操作,如到了底部之后加载
                    that.page++
            	    that.getList()
                  }   
            }
       }

**methods:**

async getList() { 
          let {  res, data } = await workList({ 
            id: this.id
            page: this.page,
            page_size: this.page_size,
          });
          // 如果获取到的数据列表长度不等于0并且页面数据列表的长度小于数据总长度时
          if(data.list.length !== 0 && this.list.length <= data.total) { 
            this.list.push(...data.list);   // 将数据放入数组
            this.isNoMore = true;    // 是否展示空列表页
          } 
          if (this.list.length == 0) { 
            this.isNoMore = false;   // 是否展示空列表页
          }
        },

**ok,问题解决**