实现文章自动加载下一篇

最新推荐文章于 2020-05-18 16:43:39 发布

冰糖葫芦不加冰——

最新推荐文章于 2020-05-18 16:43:39 发布

阅读量558

点赞数

分类专栏： ajax h5 文章标签： ajax url

本文链接：https://blog.csdn.net/me24k/article/details/66972527

版权

ajax 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

需求：点击打开一篇文章，开始阅读，滚动条一直向下走，到一篇文章看完后，自动加载下一篇文章，并且地址栏和标签title实现无刷新自动更新

这里写图片描述

实现方式：
- 判断位置当已经浏览到最后一篇的时候，ajax回调将下一篇文章append到页面底部
- 当页面来回滚动时，判断视口展示的范围，实时更新 url 和 title

更改URL使用h5提供的方法: history.replaceState()

废话不多说，直接上代码

<div id='headlines-page'>
    <div class='articles-wrapper'>
        /* 这里是每篇文章整个模块 */
        <article class='article-detail' data-articleid='12'>
            /* 这里是每篇文章的具体内容,其中data-articleid 用来记录文章的id */
        </article>
    </div>
</div>

<script>
    /*
     * mTop: 最后一篇文章距离整个文档顶部的高度
     * sTop: 页面已经卷上去的高度
     */
    window.loadNext = {
        loadingFlag: false, //正在加载下一篇为true, 加载完为false
        getNext: function(mTop, sTop){
            if(mTop <= sTop && !this.loadingFlag){
                this.loadingFlag = !this.loadingFlag
                var articleId = $('#headlines-page .articles-wrapper:last-child .article-detail').data('articleid');
                $.get('/headlines/' + articleId + '/next.js');
            }
        },
        changeUrl: function(sTop){
            $('#headlines-page .articles-wrapper').each(function(index, item){
                var topPos = $(item).offset().top - $('#top-nav').height(); //模块开始位置
                var bottomPos = $(item).offset().top + $(item).height(); //模块结束位置
                if(sTop >= topPos && sTop < bottomPos){
                    //更改url
                    var articleId = $(item).find('.article-detail').data('articleid');
                    history.replaceState(null, null, articleId+'.html');

                    //更改title
                    var pageTitle = $(item).find('.articles_module .seo-title').html().trim();
                    $("head title").html(pageTitle);
                }
            })
        },
    }

    $(window).scroll(function(){
        var mTop = $('#headlines-page .articles-wrapper:last-child').offset().top;
        var sTop = $(window).scrollTop();   
        loadNext.getNext(mTop, sTop);
        loadNext.changeUrl(sTop);
    })
</script>

ajax回调成功后执行函数：

<% if @next_headline.present? %>
    var content = "<%= j render 'headline/article', headline: @next_headline %>"
    $('#headlines-page').append(content);
    loadNext.loadingFlag = false;
<% end %>

其中content的结构为：

<div class='articles-wrapper'>
    /* 这里是每篇文章整个模块 */
    <article class='article-detail' data-articleid='12'>
        /* 这里是每篇文章的具体内容,其中data-articleid 用来记录文章的id */
    </article>
</div>