坐好了，这是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 } ?>
感谢的话或有问题记得关注留言，反驳或骂人绕道，不喜勿喷。
网友评论