AI 摘要

本文给出 Typecho 主题实现下拉懒加载的完整方案：保留原生 pageLink('next') 生成隐藏翻页按钮，jQuery 监听其点击事件，通过 Ajax 抓取下一页 HTML，提取 .dynamic-item 追加至列表尾部，并动态更新按钮链接，无新页时提示“加载到底”，无需刷新即可无限滚动。

此摘要根据文章内容自动生成，仅用于文章内容的解释与总结

最近在开发一套仿制微信朋友圈 UI 的 Typecho 主题，首页输出动态信息，此时如果在列表底部添加翻页按钮的话，就显得极为不美观，所以想到了可以用下拉懒加载的方式加载下一页的内容。

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

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

其实际输出效果为：

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

首页文章列表区域的结构：

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

JavaScript 部分：

$('.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',
            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;
});

大功告成。