Vue.js无限滚动

Question

我想知道是否有任何使用vue.js实现Ajax无限滚动的指令，或者是否有任何指令可用？

任何帮助都将不胜感激。

Answer 1

它与任何指令无关。 当用户点击窗口/容器的底部时，您需要监听滚动事件和ajax其他项目。

Answer 2

基于我使用的一些教程代码，下面演示了如何将Vue.js组件中的侦听器添加到scroll事件中，以及如果用户滚动到窗口底部则执行某些操作的方法。

请注意，在执行window.addEventListener时，您必须使用window.removeEventListener删除它。

也许这可以帮助你开始。

created: function () {
    window.addEventListener('scroll', this.handleScroll)
},
destroyed: function () {
    window.removeEventListener('scroll', this.handleScroll)
},
methods: {
    handleScroll: function () {
        this.scrollPos = document.body.scrollHeight - window.innerHeight - document.body.scrollTop;   
        if (document.body.scrollHeight - window.innerHeight - document.body.scrollTop == 0) {
            // load more data here...
        }
    }
}

Answer 3

所有jquery组件都可以通过指令与Vue集成。但是如果你想让别人帮忙，你应该提供一个jsfiddle例子。