无限滚动jquery插件不起作用

Infinite scroll jquery plugin didn't work

本文关键字：不起作用 插件 jquery 滚动 无限      更新时间：2023-09-26

我正在尝试使用无限滚动jquery插件将无限滚动添加到codeigniter的分页中。但没有成功

这是我的控制器：

$config['base_url'] = site_url('news/home/');
$config['total_rows'] = $this->home_model->count_new();
$config['per_page'] = 3;
$config['uri_segment'] = 3;
$config['limit'] = $config['per_page'];
$this->pagination->initialize($config);
$data['news'] = $this->home_model->list_data_new($config['per_page'], $this->uri->segment($config['uri_segment']));
$this->load->view('news_view',$data);

这是我的观点：

<div id="content">
<?php foreach ($news as $data):?>
    <?php echo $data['title']?>
    Post by: <?php echo $data['username']?>
<?php endforeach;?>
</div>
<button id="next">load more</button>

以下是 JavaScript 也在视图中：

 $('#content').infinitescroll({
     navSelector  : "#next:last",            
     // selector for the paged navigation (it will be hidden)
     nextSelector : "#next:last",    
     // selector for the NEXT link (to page 2)
     itemSelector : "#content"          
     // selector for all items you'll retrieve
});

分页链接将如下所示http://localhost/latihan/news/home/3然后单击下一步将如下所示http://localhost/latihan/news/home/6

问题是下一篇文章没有显示，加载更多按钮没有加载数据。

有什么答案吗？

非常感谢...

您的设置错误。

我建议您查看页面 http://www.infinite-scroll.com 本身的源代码，因为它们使用的是自己的插件。在页面上向下滚动以查看其工作情况。

除此之外，我不得不说他们的产品记录非常糟糕，并且以非常不直观的方式工作。例如，它将从nextSelector读取下一页的 URL，但仅当该元素是超链接<a ...>且仅第一次读取。然后，它将解析该 URL 以查找出现的数字"2"，加载并将数字替换为 3，依此类推。因此，您打算将第 2 页作为主页/3 页和第 3 页是主页/6 的设计不适用于此插件。

帮自己一个忙，改用jScroll。

相关文章：