Vue使用H5实现滚动页面底部加载数据

一、添加滚动监听事件

mounted() {
    window.addEventListener("scroll", this.scrollBottom, true);
},

二、实现滚动事件，滚动到底部加载数据

scrollBottom() {
    // 滚动到页面底部时
    const el = document.getElementById("content");
    const windowHeight = window.screen.height;
    const scrollTop =
    document.documentElement.scrollTop || document.body.scrollTop;
    const contentHeight = el.clientHeight;
    const toBottom = contentHeight - windowHeight - scrollTop;
    if (toBottom < 10 && !this.finished && !this.loading) {
    this.loading = true;
    // 请求的数据未加载完成时
    this.getDataList();
    }
}