vue使用H5實現滾動到頁面底部時加載數據

使用原生vue實現瀑布流，發現無法實現小程序那種滾動到地步觸發加載效果，只能自己研究了

 

實現效果：

 

實現代碼：

首先添加監聽滾動事件

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();
    }
}