魔扣论坛

魔扣源码论坛业务
查看: 1856|回复: 6

[经验交流] WordPress 实现无限下拉加载下一页文章列表

[复制链接]
  • TA的每日心情
    难过
    7 小时前
  • 签到天数: 2929 天

    [LV.Master]开坛老将

    7万

    主题

    227

    回帖

    27万

    积分

    管理员

    Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30

    魔扣币
    745005
    贡献
    157749
    威望
    32799

    最佳新人活跃会员热心会员推广达人宣传达人突出贡献优秀版主荣誉管理论坛元老

    发表于 2017-6-15 17:29:30 | 显示全部楼层 |阅读模式
    魔扣币兑换比例:【 50以下 : ¥1 = 10 魔扣币 】丨【 50 - 100 :¥1 = 20 魔扣币】丨【 100以上:¥1 = 30 魔扣币 】

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?立即注册

    x

    最近给某个客户定制主题时需要实现无限下拉加载功能,以往魔扣科技都是用某个js插件来实现了,今天教大家一个不用插件实现的方法:

    首页,在php里加上相关代码:

    1. <div class="article-list mobantu" id="article-list">
    2. <?php
    3. $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    4. $args = array(
    5. 'caller_get_posts' => 1,
    6. 'paged' => $paged
    7. );
    8. query_posts($args);
    9. while ( have_posts() ) : the_post();
    10. get_template_part( 'content', get_post_format() );
    11. endwhile; wp_reset_query();
    12. ?>
    13. </div>
    14. <?php
    15. $next_page = get_next_posts_link('加载更多');
    16. if($next_page) echo '<div class="article-paging mobantu">'.$next_page.'</div>';
    17. ?>
    复制代码

    然后,在js里加上相关代码(前提需要加载了jquery,且网站使用了伪静态分页):

    1. $('.article-paging > a').on('click',function(){ //点击实现加载更多,你可以根据自己需要改成下拉自动加载
    2. var next_url = $(this).attr("href");
    3. var next_text = $(this).text();
    4. if(next_text == '加载更多'){
    5. $(this).text('加载中...');
    6. $.ajax({
    7. type: 'get',
    8. url: next_url + '#article-list',
    9. success: function(data){
    10. result = $(data).find("#article-list .article-item");
    11. next_link = $(data).find(".article-paging > a").attr("href");
    12. //$(this).attr("href", next_url);
    13. if (next_link != undefined){
    14. $('.article-paging > a').attr("href", next_link);
    15. $('.article-paging > a').text('加载更多');
    16. }else{
    17. $(".article-paging").remove();
    18. }

    19. $(function(){
    20. $("#article-list").append(result.fadeIn(300));
    21. $('.thumb').lazyload({
    22. data_attribute: 'src',
    23. placeholder: _BGJ.uri + '/static/img/thumbnail.png',
    24. threshold: 400
    25. });
    26. });

    27. $(function() {
    28. if (next_url.indexOf("page") < 1) {
    29. $("#article-list").html('');
    30. }
    31. $("#article-list").append(result.fadeIn(200));
    32. });
    33. }
    34. });
    35. }
    36. return false;
    37. });
    复制代码

    搞定!其实这次用这种方式实现无限加载主要是为了另一个高级功能做准备的~~


    会员购买:>> 点击购买 << | 魔扣币购买:>> 点击购买 <<
    承接业务:服务器代维丨网站托管丨SEO
    联系客服:微信:morko-net | QQ:1367681973

    该用户从未签到

    3

    主题

    253

    回帖

    510

    积分

    高级魔扣

    Rank: 4

    魔扣币
    254
    贡献
    254
    威望
    0
    发表于 2017-6-15 17:46:47 来自手机 | 显示全部楼层
    叶子的离开,是因为风的追求还是树的不挽留?-魔扣源码论坛   

    该用户从未签到

    0

    主题

    256

    回帖

    512

    积分

    高级魔扣

    Rank: 4

    魔扣币
    256
    贡献
    256
    威望
    0
    发表于 2017-10-29 13:29:14 来自手机 | 显示全部楼层
    不错 支持下

    该用户从未签到

    1

    主题

    270

    回帖

    541

    积分

    高级魔扣

    Rank: 4

    魔扣币
    270
    贡献
    270
    威望
    0
    发表于 2017-11-12 11:50:42 来自手机 | 显示全部楼层
    为了三千积分!

    该用户从未签到

    1

    主题

    243

    回帖

    487

    积分

    中级魔扣

    Rank: 3Rank: 3

    魔扣币
    243
    贡献
    243
    威望
    0
    发表于 2017-11-23 20:52:24 | 显示全部楼层
    有的人认为坚持会让我们变得更强大,但有时候放手也会。',

    该用户从未签到

    3

    主题

    270

    回帖

    543

    积分

    高级魔扣

    Rank: 4

    魔扣币
    270
    贡献
    270
    威望
    0
    发表于 2018-4-27 21:55:08 | 显示全部楼层
    顶顶更健康

    该用户从未签到

    1

    主题

    243

    回帖

    488

    积分

    中级魔扣

    Rank: 3Rank: 3

    魔扣币
    244
    贡献
    244
    威望
    0
    发表于 2018-10-6 06:36:56 | 显示全部楼层
    沙发位出租,有意请联系电话:13838384381
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    • 联系我们
    • 新浪微博 :
    • 在线客服 :魔扣科技 
    • 源码QQ群 :魔扣源码论坛官方总群
    • 联系邮箱 :charlin#morko.net
    • 微信扫一扫
    快速回复 返回顶部 返回列表