infinite scroll in vue project for window; 网页全屏无限分页加载,鼠标滚动无限加载数据
今日头条和 知乎 推特 网页里页面向下滚动时,新闻会不断的追加。查看了 dom 元素,他们是把新请求到的新闻不断地追加到 ul 里。
实现无限分页的过程大致如下:
1 视窗滚动到底部
2 触发加载
3 添加到现有内容的后面。
因此,可能会出现两种情况:
1 当页面的内容很少,没有出现滚动条。
2 当页面的内容很多,出现了滚动条。
3 当页面的内容滑到底部, 继续滑动。
scrollHeight即真实内容的高度;
clientHeight比较好理解,是视窗的高度,就是我们在浏览器中所能看到内容的高度;
scrollTop是视窗上面隐藏掉的部分。
-
判断网页是否滚动到了底部,并且当前没有请求在执行
-
请求数据
-
追加数据
-
可以规定距离页面底部多少距离算底部(这里用的是48),在这个区域内会请求数据
-
用一个状态锁 loading 判断当前有没有请求正在执行,有请求在执行的话就不发请求了,以免数据混乱
-
没有更多数据时的那个一次性定时器一定要清理
-
用节流函数优化了滚动事件,默认300毫秒执行一次
参数及方法
`
$emit: loadFetch() //加载数据回调
props.sync: noMoreData() //没有更多数据
props: hasNextPage: false, //是否还有下一页
loading: false, //是否加载中节流
delay: 300, //锁定时间
`
待上传补充
现在支持直接使用组件 和 导入Plugin注册使用