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

Question

如何在javascript中实现上拉加载功能，以及如何在vue.js中实现scroll的监听？

在做上拉加载时， 需要面临几个问题

1. 如何监听scroll滚动条滚动的事件?

2. 如何判断scroll已经滚动到底部了?

3. 处理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            }        }    }})