8000 GitHub - SandySY/infinite-scroll: infinite scroll in vue project for window; 网页全屏无限分页加载,鼠标滚动无限加载数据
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

infinite scroll in vue project for window; 网页全屏无限分页加载,鼠标滚动无限加载数据

Notifications You must be signed in to change notification settings

SandySY/infinite-scroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 

Repository files navigation

infinite-scroll

infinite scroll in vue project for window; 网页全屏无限分页加载,鼠标滚动无限加载数据

效果

今日头条和 知乎 推特 网页里页面向下滚动时,新闻会不断的追加。查看了 dom 元素,他们是把新请求到的新闻不断地追加到 ul 里。

原理

实现无限分页的过程大致如下:

1 视窗滚动到底部

2 触发加载

3 添加到现有内容的后面。

因此,可能会出现两种情况:

1 当页面的内容很少,没有出现滚动条。

2 当页面的内容很多,出现了滚动条。

3 当页面的内容滑到底部, 继续滑动。

需要理解几个概念:

scrollHeight即真实内容的高度;

clientHeight比较好理解,是视窗的高度,就是我们在浏览器中所能看到内容的高度;

scrollTop是视窗上面隐藏掉的部分。

视窗概念图

实现的思路:

  1. 判断网页是否滚动到了底部,并且当前没有请求在执行

  2. 请求数据

  3. 追加数据

细节

  1. 可以规定距离页面底部多少距离算底部(这里用的是48),在这个区域内会请求数据

  2. 用一个状态锁 loading 判断当前有没有请求正在执行,有请求在执行的话就不发请求了,以免数据混乱

  3. 没有更多数据时的那个一次性定时器一定要清理

  4. 用节流函数优化了滚动事件,默认300毫秒执行一次

使用

参数及方法
`
$emit: loadFetch()          //加载数据回调
props.sync: noMoreData()    //没有更多数据
props:  hasNextPage: false,  //是否还有下一页
        loading: false,     //是否加载中节流
        delay: 300,         //锁定时间
`

npm

待上传补充
现在支持直接使用组件 和 导入Plugin注册使用

About

infinite scroll in vue project for window; 网页全屏无限分页加载,鼠标滚动无限加载数据

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
0