实现文章自动加载下一篇

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值