注意:主题作者已在2019年9月8号更新的V2.2版本中 加入下拉加载功能!

最新的Akina for Typecho V2.1版本的首页文章列表是手动加载的,体验尚缺。为了更好体验,把拉到底自动加载功能加上。
1、打开global.js(在usrthemesAkinajs目录下);
2、找到下面代码(一般在276行)

jQuery(document).ready(function($){
    // browser window scroll (in pixels) after which the "back to top" link is shown
    var offset = 100,
        //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
        offset_opacity = 1200,
        //duration of the top scrolling animation (in ms)
        scroll_top_duration = 700,
        //grab the "back to top" link
        $back_to_top = $('.cd-top');

    //hide or show the "back to top" link
    $(window).scroll(function(){
        ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
        if( $(this).scrollTop() > offset_opacity ) { 
            $back_to_top.addClass('cd-fade-out');
        }
    });

    //smooth scroll to top
    $back_to_top.on('click', function(event){
        event.preventDefault();
        $('body,html').animate({
            scrollTop: 0 ,
             }, scroll_top_duration
        );
    });
    
    //pjax
    if(app.pjax){
    $(document).pjax('a[target!=_top]', '#page', {
            fragment: '#page', //主容器
            timeout: 8000, // 8秒限时
        }).on('pjax:send', function() {
            $('body').append('<div id="preloader"><div id="preloader-inner"></div></div>'); // 加载过度动画
        }).on('pjax:complete', function() { // 加载完毕                
            clickEvent(); // 一些点击事件
            $('#preloader').remove(); // 删除过度动画
        });
    }
});

3、在末尾的});前插入以下代码即可。

    //自动加载
        var finished = false;
        var i = 1; //设置当前页数,全局变量
        var winH = $(window).height(); //页面可视区域高度 
        var scrollHandler = function () {
            var pageH = $(document.body).height();
            var scrollT = $(window).scrollTop(); //滚动条top 
            var aa = (pageH - winH - scrollT) / winH;
            if (!finished && aa < 0.2) { //0.02是个参数
                if (i % 5 === 0) { //每5页做一次停顿
            $('#pagination a').click();
                    $(window).unbind('scroll');                
                } else {
                $('#pagination a').click();
                    finished = true;
                    setTimeout(function(){finished = false;},500);
                }
            }
        }
        $(window).scroll(scrollHandler); //定义鼠标滚动事件
    //自动加载

大功告成,是不是很简单?

原文链接:Akina for Typecho 首页实现自动加载功能

Last modification:September 18th, 2019 at 01:14 pm
如果觉得我的文章对你有用,请随意赞赏