最近在开发一套仿制微信UI的typecho主题，首页输出动态信息，此时如果在首页放置上一页下一页这种翻页按钮的时候，就显得极为不妥，因此想到了可以用下拉懒加载的方式加载后续页面的内容。

在底部适当的位置放入加载下一页按钮的代码：

<?php $this->pageLink('点击查看更多','next') ?>

其实际输出效果为：

<a class="next" title="" href="下一页的链接">点击查看更多</a>

然后自行写css，这里就不说了。先了解一下首页文章列表区域的一些代码：

<!--文章区域-->
<section class="dynamic">
    <!--朋友圈动态数据-->
    <div class="dynamic-item">
        <!--文章内容-->
    </div>
</section>

写公共的JS部分：

$('.loading a.next').click(function() {
    $this = $(this);
    //href：获取下一页的链接
    var href = $this.attr('href');
    if (href != undefined) {
        //如果有下一页的链接，则请求下一页的链接
        $this.addClass('loading').text('正在努力加载');
        $.ajax({
            url: href,
            type: 'get',
            error: function(request) {

            },
            success: function(data) {
                $this.removeClass('loading').text('点击查看更多');
                //在下一页的链接中取出所有的朋友圈动态数据
                var $res = $(data).find('.dynamic-item');
                //追加到文章区域里面的最后面
                $('.dynamic').append($res.fadeIn(500));
                //更新下一页的链接
                var newhref = $(data).find('a.next').attr('href');
                if (newhref != undefined) {
                    $('a.next').attr('href', newhref);
                } else {
                    $('a.next').text('加载到底了~');
                    $('a.next').removeAttr("href");
                }
            }
        });
    }
    return false;
});