当前位置: 首页 > 工具软件 > ScrollPager > 使用案例 >

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

司国源
2023-12-01

坐好了,这是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();  ?>

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

 

 类似资料: