Question

我正在使用Vue.js通过paginate（）定期获取Laravel API的资源，在获取前10个实例后，我想获取其他10个实例，我的方法如下所示：

scroll () {
        window.onscroll = () => {
        let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;

        if (bottomOfWindow) {
                setTimeout(() => {
                axios.get('/api/groups')
                .then((response) => {
                    console.log("end of window");
                    Object.assign( {}, this.groups, response.data.meta.total);
                })
                .catch(error => {
                    console.log(error)
                })
            }, 400)
        }
    }
    }

错误是：

当我从底部滚动到顶部并到达顶部时，我在控制台中收到了消息，反之亦然。
我无法在其他行中添加我现在拥有的其他10个资源。

如果我要console.log response.data.meta，我将得到以下信息：

current_page: 1
from: 1
last_page: 2
path: "http://www.bla-bla.io/api/groups"
per_page: 10
to: 10
total: 20
__proto__: Object

这是什么问题？！

谢谢

Answer 1

将bottomOfWindow更改为：

(window.innerHeight + window.scrollY) >= document.body.offsetHeight

这应该正确检测到页面底部。

错误地到达窗口顶部而不是窗口底部

1 个答案: