Typecho模板开发之文章列表下拉加载功能的解决方案

# 折腾 # · 2020-10-12

最近在开发一套仿制微信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;
});
如无特殊说明,本博所有文章均为博主原创。

如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/141/

评论