javascript上拉加载数据，在vue.js中的实现?

Question

如何在javascript中实现上拉加载功能，以及如何在vue.js中实现scroll的监听？在做上拉加载时， 需要面临几个问题如何监听scroll滚动条滚动的事件?如何判断scroll已经滚动到底部了?处理scroll的offset和documentElement的Height关系

Answer 1

刚好我前天写了一个简易的 你参考一下？
github

Answer 2

你忽略了一个问题，因为滚动不一定100%发生在window上面，有可能是发生在你某个div里面，如果是发生在div里面，那么你绑定scroll事件到window上面是不会生效的。

Answer 3

相关代码

// 监听滚动条

new Vue({

    beforeMount: function() {

        // 监听scroll事件

        window.addEventListener('scroll', this.handleScroll)

    },

    beforeDestroy () {

        window.removeEventListener('scroll', this.handleScroll)

    },

    data: {},

    mothods: {

        handleScroll: function() {

            // handle you scroll event

            

            // 最大的页面Y方向offset 加上 窗口的高度 等于 文档的高度

            // max(window.pageYOffset) + window.innerHeight === document.documentElement.scrollHeight

            

            if (window.pageYOffset + window.innerHeight >= document.documentElement.scrollHeight) {

               // 处理上拉加载事件 放在这里 

               // 获取服务端数据方法

               // 如果想使用预加载数据，即，即将滑动到底部时候就加载数据

               // window.pageYOffset + window.innerHeight >= document.documentElement.scrollHeight - 20

            }

        }

    }

})