yii2 pjax翻页无刷新 + JQ版InfiniteScroll无限自动翻页 (yii2的scrollpager可以放弃了，因为y2sp也是从is继承过来的)

坐好了，这是yii2 国内全网，唯一一个完全的完整的教程 pjax翻页无刷新 + infiniteScroll无限瀑布流刷新，或者叫无限下拉刷新。目前国内无此插件中文版，也没有一个专门教程，我就写个原创普及一下。转发保存，必须注明出处，道德要高尚。

什么？不知道yii2 pajx infiniteScroll scrollpager是干嘛的？

简单的说pajx 一般用于tab页的无感刷新，就是当你点一下分页标签的时候，下面的内容会对应的去读取服务器数据，但你是无感的，页面也没有跳转的感觉。

infiniteScroll（is）无限瀑布流刷新，就是类似今日头条，抖音里那种无限下拉，只要有数据，就无限的加载，如果搭配pajx 体验很好，目前只有大厂才会有。

scrollpager（sp）可以实现和is一样的效果，但不推荐用的原因是，亲测同样的逻辑，is效率更高，sp效率低，刷几十页后会出现些许卡顿的问题，主要是view层的问题。

目前一般大厂或大型新闻站如今日头条之类的，都会用ajax+json，这样做不是不行，个人认为json会完全暴露，如果用yii2 对接小程序或app 推荐直接写api和业务层完全分开，这样可以大大提高了安全性。

扯远了，废话不多说，上代码

<?php Pjax::begin(['enablePushState' => false, 'id' => 'tab_div', 'timeout' => false]); ?>

<div class="main">

    <div class="tab_div">...切换的tab页代码块</div>

    <div id="tab_content">

           <?php if (!empty($re_list)) {//$re_list需要从控制器压出来

            $pc = ceil($pager->totalCount / pageSize);//$pager需要从控制器压出来，pageSize是每次加载多少页，设置常量即可，一般看业务，20-50都行            $list_count = count($re_list);
            ?>

                               <?php foreach ($re_list as $k): ?>

                                         <div class="list_box">

                                                   ...业务循环代码...

                                             </div>

                                   <?php endforeach; ?>

                   <?php } else { ?>

                               <div class="none">无</div>

                   <?php } ?>

    </div>

    <?php if ($pager->totalCount < pageSize) { ?>
        <?php if ($list_count) { ?>
        <div style="text-align: center;padding: 10px;font-size: 14px;color: #888;">到底了</div>
        <?php } ?>

    <?php }else{ ?>

        <div class="page-load-status">
            <?php if ($pc > 1) { ?>
                <div class="loader-ellips infinite-scroll-request">
                    <div style="text-align: center;padding: 10px;">
                        <i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>
                    </div>
                </div>
            <?php } ?>
            <div class="infinite-scroll-last" style="text-align: center;padding: 10px;font-size: 14px;color: #888;"> 到底了</div>
        </div>

<!-- 如果需要滑到底自动循环刷新，禁用下方代码块即可 --> 
    <?php if ($pc > 1 && $pager->totalCount > pageSize) { ?>
        <div id="vm_box" class="vm_box">
            <button class="view_more">点击查看更多</button>
        </div>
    <?php } ?>
<!-- 如果需要滑到底自动循环刷新，禁用上方代码块即可 -->

        <script>
            var $container = $('#tab_content').infiniteScroll({
                path: function () {
                    var pageNumber = ( this.loadCount + 2 );
                    if (pageNumber <= <?php echo $pc ?>) {
                        $('.vm_box').show();
                        return '?page=' + pageNumber;
                    } else {
                        $('.vm_box').show();
                    }
                },
                append: '.list_box',
                status: '.page-load-status',
                history: false,
                button: '.vm_box',
                //scrollThreshold: true,//从开头就是开始滚动加载                
                scrollThreshold: false,
                loadOnScroll: false//滚动是否加载，默认是true开启状态，如果需要手动点击加载则必须写出来，并且值为false可
            });

            var $viewMoreButton = $('.vm_box');
            $viewMoreButton.on('click', function () {
                $container.infiniteScroll('loadNextPage');
                $container.infiniteScroll('option', {
                    loadOnScroll: true,
                });
                $viewMoreButton.hide();
            });

            $().ready(function () {
                var script = document.createElement("script");
                script.src = "/assets/js/is.js";//这是我的InfiniteScroll js文件，换成自己的文件名或位置即可，当然也可以和我的一样，打开https://unpkg.com/infinite-scroll@3.0.6/dist/infinite-scroll.pkgd.min.js，全部复制-》创建新js文件-》存到自己的路径去，这块就是pajx翻页或跳转之后js无效的解决方案。

                var body = document.body;
                body.insertBefore(script, body.firstChild);
            });
        </script>

    <?php } ?><div >
<?php Pjax::end();  ?>

感谢的话或有问题记得关注留言，反驳或骂人绕道，不喜勿喷。