滚动调到底部自动加载

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

{{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;
}
}

}
})
},

你可能感兴趣的:(滚动调到底部自动加载)