javascript上拉加载数据,在vue.js中的实现?
如何在javascript中实现上拉加载功能,以及如何在vue.js中实现scroll的监听?
在做上拉加载时, 需要面临几个问题
- 如何监听scroll滚动条滚动的事件?
- 如何判断scroll已经滚动到底部了?
- 处理scroll的offset和documentElement的Height关系
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
发布评论
评论(4)
唠甜嗑2022-09-14 16:53:36
相关代码
// 监听滚动条
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
}
}
}
})
~没有更多了~
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
有示例:https://github.com/sunmengyua...