坐好了，這是yii2 國(guó)內(nèi)全網(wǎng)，唯一一個(gè)完全的完整的教程 pjax翻頁(yè)無(wú)刷新 + infiniteScroll無(wú)限瀑布流刷新，或者叫無(wú)限下拉刷新。目前國(guó)內(nèi)無(wú)此插件中文版，也沒(méi)有一個(gè)專(zhuān)門(mén)教程，我就寫(xiě)個(gè)原創(chuàng)普及一下。轉(zhuǎn)發(fā)保存，必須注明出處，道德要高尚。
什么？不知道yii2 pajx infiniteScroll scrollpager是干嘛的？
簡(jiǎn)單的說(shuō)pajx 一般用于tab頁(yè)的無(wú)感刷新，就是當(dāng)你點(diǎn)一下分頁(yè)標(biāo)簽的時(shí)候，下面的內(nèi)容會(huì)對(duì)應(yīng)的去讀取服務(wù)器數(shù)據(jù)，但你是無(wú)感的，頁(yè)面也沒(méi)有跳轉(zhuǎn)的感覺(jué)。
infiniteScroll（is）無(wú)限瀑布流刷新，就是類(lèi)似今日頭條，抖音里那種無(wú)限下拉，只要有數(shù)據(jù)，就無(wú)限的加載，如果搭配pajx 體驗(yàn)很好，目前只有大廠(chǎng)才會(huì)有。
scrollpager（sp）可以實(shí)現(xiàn)和is一樣的效果，但不推薦用的原因是，親測(cè)同樣的邏輯，is效率更高，sp效率低，刷幾十頁(yè)后會(huì)出現(xiàn)些許卡頓的問(wèn)題，主要是view層的問(wèn)題。
目前一般大廠(chǎng)或大型新聞?wù)救缃袢疹^條之類(lèi)的，都會(huì)用ajax+json，這樣做不是不行，個(gè)人認(rèn)為json會(huì)完全暴露，如果用yii2 對(duì)接小程序或app 推薦直接寫(xiě)api和業(yè)務(wù)層完全分開(kāi)，這樣可以大大提高了安全性。
扯遠(yuǎn)了，廢話(huà)不多說(shuō)，上代碼
<?php Pjax::begin(['enablePushState' => false, 'id' => 'tab_div', 'timeout' => false]); ?>
<div class="main">
? ? <div class="tab_div">...切換的tab頁(yè)代碼塊</div>
? ? <div id="tab_content">
? ? ? ? ? ?<?php if (!empty($re_list)) {//$re_list需要從控制器壓出來(lái)
? ? ? ? ? ? $pc = ceil($pager->totalCount / pageSize);//$pager需要從控制器壓出來(lái)，pageSize是每次加載多少頁(yè)，設(shè)置常量即可，一般看業(yè)務(wù)，20-50都行
$list_count = count($re_list);
? ? ? ? ? ? ?>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<?php foreach ($re_list as $k): ?>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="list_box">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?...業(yè)務(wù)循環(huán)代碼...
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<?php endforeach; ?>
? ? ? ? ? ? ? ? ? ?<?php } else { ?>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="none">無(wú)</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>
<!-- 如果需要滑到底自動(dòng)循環(huán)刷新，禁用下方代碼塊即可 -->
? ? <?php if ($pc > 1 && $pager->totalCount > pageSize) { ?>
? ? ? ? <div id="vm_box" class="vm_box">
? ? ? ? ? ? <button class="view_more">點(diǎn)擊查看更多</button>
? ? ? ? </div>
? ? <?php } ?>
<!-- 如果需要滑到底自動(dòng)循環(huán)刷新，禁用上方代碼塊即可 -->
? ? ? ? <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,//從開(kāi)頭就是開(kāi)始滾動(dòng)加載
? ? ? ? ? ? ? ? scrollThreshold: false,
? ? ? ? ? ? ? ? loadOnScroll: false//滾動(dòng)不加載，默認(rèn)是開(kāi)啟狀態(tài)，如果需要手動(dòng)點(diǎn)擊加載則必須寫(xiě)出來(lái)，并且值為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文件，換成自己的文件名或位置即可，當(dāng)然也可以和我的一樣，打開(kāi)https://unpkg.com/infinite-scroll@3.0.6/dist/infinite-scroll.pkgd.min.js，全部復(fù)制-》創(chuàng)建新js文件-》存到自己的路徑去，這塊就是pajx翻頁(yè)或跳轉(zhuǎn)之后js無(wú)效的解決方案。
? ? ? ? ? ? ? ? var body = document.body;
? ? ? ? ? ? ? ? body.insertBefore(script, body.firstChild);
? ? ? ? ? ? });
? ? ? ? </script>
? ? <?php } ?>
感謝的話(huà)或有問(wèn)題記得關(guān)注留言，反駁或罵人繞道，不喜勿噴。
