滚动调到底部自动加载

浏览器滚动到底部 会自动加载更多数据

  {{bottomTipText}}

  暂无数据

/*底部加载更多*/
.bottom-tip{
  padding:.25rem 0;
  text-align:center;
}

/*变量属性*/

bottomTip: false,
bottomTipText: '',
pages: {
  // 每页数
  noData: false,

  page_size: 30,

  // 当前页
  page: 1,
  // 最后一页
  last_page: 1
}

  
  // 监听滚动条 加载更多
  window.addEventListener('scroll', () => {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    
    if(scrollHeight > clientHeight && scrollTop + clientHeight >= scrollHeight) {
      this.loadmore();
    }
  });

loadmore() {
  if (this.pages.last_page > this.pages.page) {
    this.pages.page++;
    this.history();
  }
},

xxx () {
  this.bottomTipText = '加载中...';
  this.Api.xxx(this.pages, this.urlType).then( response => {
    if (response['success']) {
      this.bottomTip = true;
      this.bottomTipText = '滑动加载更多...';
      this.pages.last_page = response['data']['last_page'];

      

if (response['data']['last_page'] <= this.pages.page) {
  this.bottomTipText = '暂无更多数据...';
  if(!data.length) {
    this.noData = true;
    this.bottomTip = false;
  } else {
    this.noData = false;
  }
}

    }
  })
},