app滚动分页(触底加载)

423 阅读1分钟
1、首先
mounted() {
    window.onscroll = this.scrollFn
}
2、window.onscroll滚动就会触发,所以如果可视区域的高度screenHeight + 元素向上卷曲出去的距离scrollTop > 列表的高度就pageIndex + 1 请求数据
    2.1 
    mounted() {
        // 头部有数据
        let headerHeight = this.$refs.header.clientHeight;
        // 获取可视区域的高度
        let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;  
        // 可视区域的高度要去除头部导航栏和头部的高度
        this.listViewHeight = screenHeight - headerHeight - parseInt(this.theme.navHeaderHeight);
        window.onscroll = this.scrollFn
    }
    2.2
    scrollFn() {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
          if (scrollTop + this.listViewHeight >= this.listHeight) {
            this.pageConfig.pageIndex += 1;
            this.getOpportunity();
          }
    }
3、这样有个问题随着滑动scrollTop + this.listViewHeight >= this.listHeight会一直为true 所以要限制条件 !this.over
    scrollFn() {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
          if (scrollTop + this.listViewHeight >= this.listHeight && !this.over) {
            this.pageConfig.pageIndex += 1;
            this.getOpportunity();
          }
    }
4、over是什么?当请求数据的长度小于每页的页数的时候说明数据已经请求完了,所以要终止 over = true

  // pageConfig: { // 分页设置
  //   DefaultSize: 50,
  //   PageSize: 15,
  //   PageIndex: 1,
  //   PageCount: 0
  // },

    async getVisitData() {
      let res = await syncLogSer.getSyncDataLog(this.pageConfig)
      let { Data: data, Total: total, Count: count } = res;
      if (data.length < this.pageConfig.PageSize) {
        this.over = true;
      }
      this.dataList = this.pageConfig.pageIndex === 1 ? data : [...this.dataList, ...data]
      this.$nextTick(() => {
        this.listHeight = this.$refs.dataListH.scrollHeight;
      });
    },