Question

你好我有一个在php / codeigniter和我的主页上显示的博客（显示所有帖子）我想在我的帖子上进行无限滚动，这样当我到达底部时我可以加载7个页。

这是我的控制器：

public function index()
    {
        $data['posts'] = $this->Model_cats->getLivePosts(7);
        $data['cats'] = $this->Model_cats->getTopCategories(); 
        $data['title'] = 'Welcome';
        $data['main'] = 'public_home';
        $this->load->vars($data);
        $this->load->view('template', $data);
    }

    public function index_show_post()
    {
        $data['posts'] = $this->Model_cats->getLivePosts(7);
        $data['cats'] = $this->Model_cats->getTopCategories(); 
        $data['title'] = 'Welcome';
        $data['main'] = 'public_home';
        $data['main2'] = 'public_home_loadpost';
        $this->load->vars($data);
        $this->load->view('template', $data);
    }

我认为showoul的函数index_show_post（）为我加载了7个帖子！我不知道这是否是解决方案，但我确实需要帮助！

这是我的模特：

function getLivePosts($limit)
    {
        $data = array();

        $this->db->limit($limit);
        $this->db->where('status', 'published');
        $this->db->order_by('pubdate', 'desc');
        $query = $this->db->get('posts');

        if($query->num_rows() > 0)
        {
            foreach($query->result_array() as $row)
            {
                $data[] = $row;
            }
        }

        $query->free_result();
        return $data;
    }

并且视图如下所示：

<?php

    if ( count($posts) )
    {
        foreach ($posts as $key => $list)
        {
            echo "<div class='postedComment'>";
            echo '<h2>'.$list['title'].'</h2>';
            echo auto_typography( word_limiter($list['body'], 200) );
            echo anchor('welcome/post/'.$list['id'],'read more >>');
            echo "</div>";
        }
        echo '<br/><br/>';
    }

?>

<div id='loadMoreComments' style="display:none;"></div>

我jave javascript文件..使用ajax我想让这件事发生：

$(window).scroll(function()
{
    if( $(window).scrollTop() == $(document).height() - $(window).height() ){
        $('div#loadMoreComments').show();

        $.ajax({
            url: "<?php echo base_url()/welcome/index_show_post?>?lastComment=" + $(".postedComment:last").attr("id"),
            success: function(html){
                if(html)
                {
                    $("#postedComments").append(html);
                    $('div#loadMoreComments').hide();

                }
                else
                {
                    $('div#loadMoreComments').replaceWith("Finished Loading the comments");
                }
            }
        });
    }
});

在这行代码中：

url: "<?php echo base_url()/welcome/index_show_post?>?lastComment=" + $(".postedComment:last").attr("id"),

我想打电话给控制器，它应该工作！但事实并非如此！

有什么建议吗？

Answer 1

首先在这里获取jquery的无限滚动插件：http://www.infinite-scroll.com/，假设你有jquery ......

有很多例子供参考，所以我将快速完成基本逻辑：

页面加载没有任何帖子！
页面完成加载，初始化无限滚动
Ajax是您的服务器并获取帖子并加载它们。
用户向下滚动，当他击中底部时，或任何你已配置，它会加载更多。
重复步骤4

比构建自定义文件更容易，并且限制了DOM。这意味着你只在DOM中显示了什么。

使用ajax为我的博客主页无限滚动

1 个答案: