网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款轻量级可配置的jquery无限滚动插件,取代了传统的分页,提供了一个类似于本地移动应用程序的更好的内容加载体验。当内容区域不断滚动到页面底部(或特定容器)时,通过AJAX自动或手动从服务器加载更多内容。
1.在页面加载最新版本的jQuery库之后,加载滚动插件。
<link href="scrollpagination.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="scrollpagination.js"></script>
2.在JSON文件中定义您的内容,当向下滚动页面时,插件从中获取并将更多内容附加到底部现有的内容中。
// data.json
{
"content": {
"0": "Entry 1",
"1": "Entry 2",
"2": "Entry 3",
"3": "Entry 4",
"4": "Entry 5",
// ... 更多内容
}
}
3. 创建一个容器来保存内容。
<div id="scrollpagination">
<ul id="content"></ul>
</div>
4. 创建一个DIV来保存加载消息。
<div class="loading" id="loading"></div>
5. 调用函数并定义JSON文件的路径。
$(function(){
$('#content').scrollPagination({
'url': 'data.json',
'data': {
'page': 1,
'size': 10,
}
});
});
6. 默认情况下,当向下滚动网页时,插件会自动从JSON文件加载内容。要使用“加载更多”按钮手动加载更多内容,请执行以下步骤:
$(function(){
$('#content').scrollPagination({
'url': 'data.json',
'data': {
'page': 1,
'size': 10,
},
'autoload': false,
'before': function(){},
'after': function(elementsLoaded){
$(elementsLoaded).fadeInWithDelay();
}
});
});
7. 确定要跟踪滚动事件的容器。默认值:整个窗口。
$(function(){
$('#content').scrollPagination({
'url': 'data.json',
'data': {
'page': 1,
'size': 10,
},
'scroller': $("#myContainer")
});
});
8.向下滚动页面时触发自动加载行为的偏移量。默认值:20px。
$(function(){
$('#content').scrollPagination({
'url': 'data.json',
'data': {
'page': 1,
'size': 10,
},
'heightOffset': 0
});
});
9. 自定义加载消息。
$(function(){
$('#content').scrollPagination({
'url': 'data.json',
'data': {
'page': 1,
'size': 10,
},
'loading': '#loading',
'loadingText': '正在加载中',
'loadingNomoreText': '我是有底线的',
'manuallyText': '点击加载更多'
});
});
转载请注明来源:jquery鼠标向下滚动时加载更多内容(无限滚动分页)插件
本文永久链接地址:https://www.moyouyouw.cn/code/794.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论