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

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

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

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;   // 是否展示空列表页
      }
    },