我正在尝试在我使用Coldfusion开发的网站上设置无限滚动,我是javascript和jquery的新手,所以我有一些问题包围了所有这些.我是否需要在我的网站上进行分页才能使用无限滚动插件,或者有没有办法实现它？
javascript css jquery infinite-scroll jquery-infinite-scroll
我正在为网站使用无限滚动jquery插件(https://github.com/paulirish/infinite-scroll)
一切都很好,除了我的页面是一个搜索所以......发生的是:
1)你进入页面,浏览器自动定位你并返回你周围的项目列表(例如条形图)...需要无限滚动以避免对此列表进行分页.一切都有效,直到这里...除了我可以到达"无限页末尾"并且插件从滚动中"解除绑定"的事实.
2)现在....当你想在输入文本中手动插入一个地址时,你可以自由地做...你写下你的地址,然后按下输入...和ajax(没有页面刷新).. .i会寻找lat/lon,找到地址,更改无限滚动的导航链接....而且,我觉得愚蠢,但我无法想出一种方法来"重新激活"或"重新绑定"活动的插件......所以我的"新搜索结果"没有一个新的"无限卷轴"实例......
(页面"拆分"正确并正确返回json尝试更改"page = NUMBER")
这是控制台中发生的事情:
["math:", 0, 468]
jquery.infinitescroll.min.js:20["heading into ajax",
Array[2]
0 : "/ajax/getCoworkings/?page="
1 : "&latitude=52.5234051&longitude=13.4113999&distance=12"
length : 2
__proto__ : Array[0]
]
jquery.infinitescroll.min.js:20["Using JSON via $.ajax() method"]
jquery.infinitescroll.min.js:20["Error", "end"]
jquery.infinitescroll.min.js:20["Binding", "unbind"]
在"unbind"之后,我无法再绑定它,因此在我的下一个搜索结果中有无限滚动........
我使用无限滚动js(行为设置为twitter)来加载索引页面上的新内容.我担心的是,如何重新启动对通过无限滚动加载的新帖子的动画？我已经详细描述了所遵循的页面结构,如果有人可以分享相同的解决方案,我将非常感激.
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div class="animsition">
<header class="header"></header>
<main class="main">
<section class="main-body">
<div id="infinite-scroll">
<article class="post">
<div class="post-body">
<h2 class="post-title">
<a href="" class="nav-link" title=""></a>
<h2>
</div>
</article>
</div>
<div class="pagination">
<a href="" class="next">Load Older Items</a>
</div>
</section>
</main>
<footer class="footer"></footer>
</div>
</body>
</html>
这是JS,
$(".animsition").animsition({
inClass : 'fade-in',
outClass : 'fade-out',
linkElement : '.nav-link',
overlay : false
});
$(function() {
$("#infinite-scroll").infinitescroll({
navSelector: ".pagination",
nextSelector: ".next",
itemSelector: ".post",
behavior: "twitter"
},
function(newElements){
});
javascript infinite-scroll animsition jquery-infinite-scroll
我在config文件夹中有一个pagination.php文件.代码如下
$config['num_links'] = 5;
$config['use_page_numbers'] = TRUE;
$config['query_string_segment'] = 'page';
$config['full_tag_open'] = '<div class="pagination"><ul>';
$config['full_tag_close'] = '</ul></div>';
$config['first_link'] = '« First';
$config['first_tag_open'] = '<li class="prev page">';
$config['first_tag_close'] = '</li>';
$config['last_link'] = 'Last »';
$config['last_tag_open'] = '<li class="next page">';
$config['last_tag_close'] = '</li>';
$config['next_link'] = 'Next →';
$config['next_tag_open'] = '<li class="next page">';
$config['next_tag_close'] = '</li>';
$config['prev_link'] = '← Previous';
$config['prev_tag_open'] = '<li class="prev page">';
$config['prev_tag_close'] = '</li>';
$config['cur_tag_open'] = '<li class="active"><a class="navigation" href="">';
$config['cur_tag_close'] = '</a></li>';
$config['num_tag_open'] = '<li class="page">';
$config['num_tag_close'] = …