0

您好，我在 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>

我将 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"),

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

有什么建议么？

4

1 回答 1

0

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

那里有很多示例可供参考，因此我将快速了解基本逻辑：

  1. 页面加载没有帖子！
  2. 页面加载完毕，初始化无限滚动
  3. Ajax 是您的服务器，可以获取帖子并加载它们。
  4. 用户向下滚动，当他触底或您配置的任何内容时，它会加载更多。
  5. 重复步骤 4

比构建自定义的要容易得多，并且可以限制 DOM。这意味着您在 DOM 中只有正在显示的内容。

于 2013-02-15T13:47:09.390 回答