vue项目实现页面上拉滚动加载

@scroll 滚动监听事件
document.body.clientHeight 页面视口高度

......
    <!-- 页面展示 -->
    <div ref="pageRef" class="contain_block"  @scroll="handleScroll">
      <el-backtop :visibility-height="100"/>
      <pageIndex  v-if="list && list.length" :list="list"/>
      <el-empty v-else description="暂无数据"></el-empty>
    </div>
.......

......
  methods:{
    /** 
     * 监听滚动事件
     * 已经滚动的距离+页面的高度=整个内容区高度时,视为接触到底部
     * scrollTop 获取到顶部的滚动距离
     * scrollBottom 获取到低部的滚动距离
     * clientHeight 表示页面视口高度
     * scrollHeight 页面内容的高度
     */
    handleScroll(){
      const $list=this.$refs.pageRef;
      //如果数据有在加载中则这次请求退出
      if(this.loading) return; 
      // console.log($list.scrollTop+'<=已经滚动的距离',
      // $list.scrollHeight+'<=页面内容的高度',
      // document.body.clientHeight+'<=页面视口高度');
      const scrollBottom = document.body.clientHeight - $list.scrollHeight - $list.scrollTop;
      if($list.scrollTop >= 30 && scrollBottom > 0 && ($list.scrollTop + document.body.clientHeight >= $list.scrollHeight)){
        this.loading = true;
        setTimeout(()=>{
          this.params.currentPage += 1;
          this.getList();
          this.loading = false;
        },2000);
      }
    },
    ......
    }
    ......