yii2 pajx无感刷新+infiniteScroll/scrollPager无限下拉刷新原创教程

坐好了,这是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//滚动不加载,默认是开启状态,如果需要手动点击加载则必须写出来,并且值为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 } ?>

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。