Ghost博客系統默認提供的博文列表為傳統的翻頁方式（通過點擊上一頁、下一頁等按鈕來切換），隨著移動客戶端的發展，瀑布流式的滾動加載方式得到廣泛應用，有效地提高了用戶瀏覽信息的流暢度。下面詳述如何通過Infinite Scroll來改造Ghost博文列表的翻頁效果。

Infinite Scroll

Infinite Scroll顧名思義：無限滾動，也稱為自動分頁、滾動分頁和無限分頁，是基于jquery的一個插件。可以用來實現滾動頁面的時候加載下一頁的內容。

infinite-scroll項目地址

實現步驟

• 將jquery.infinitescroll.min.js拷貝到你的主題目錄下
• 在循環獲取posts列表的頁面上引入jquery.infinitescroll.min.js文件

注意：jquery.infinitescroll.min.js必須在jquery引入之后

<script src="{{asset "js/jquery.infinitescroll.min.js"}}"></script>

• 嘗試一下最簡配置，若我們的頁面結構如下

{{#foreach posts}}<article class="{{post_class}}">{{!有封面的時候展示封面}}{{#if image}}<a class="post-pic hidden-xs" href="{{url}}" style="background-image: url({{image}});"></a>{{/if}}<header class="post-header"><h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2></header><section class="post-excerpt"><p>{{excerpt characters="140"}} <a class="read-more" href="{{url}}">?</a></p></section><footer class="post-meta">{{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}{{author}}{{tags prefix=" <i class=\"fa fa-tags\"></i> "}}<time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="YYYY年MM月DD日"}}</time></footer></article> {{/foreach}}<nav class="pagination" role="navigation">{{#if prev}}<a class="newer-posts" href="{{page_url prev}}">← 上一頁</a>{{/if}}<span class="page-number">第 {{page}} 頁 ? 共 {{pages}} 頁</span>{{#if next}}<a class="older-posts" href="{{page_url next}}">下一頁 →</a>{{/if}} </nav>

• 我們可以通過如下代碼將原來點擊上一頁、下一頁的翻頁模式變成滾動翻頁

<script>$(document).ready(function (){$('#posts-content').infinitescroll({navSelector : "nav.pagination",nextSelector : "nav.pagination a:last",itemSelector : "article"});}); </script>

使用解析

• 通過id選擇器$('#posts-content')選中post列表的循環展示區域，后續加載的內容會被append到這個節點之下
• navSelector參數，用來選中翻頁模塊的html位置，如上配置即選中了nav標簽class為pagination的元素，框架會將這部分內容隱藏（隱藏原來的翻頁模塊）
• nextSelector參數，標出下一頁的請求鏈接，框架根據此獲取下一頁的請求以發起ajax請求獲取下一頁的html內容
• itemSelector參數，在發起了下一頁請求之后，通過這個參數的配置來截取下一頁html內容中post部分來填充到navSelector選中位置的最后

進階配置

在完成了上面操作之后，還可以做一些進階的配置，比如修改加載中的文字描述，沒有內容之后的提示內容等等。

下面是本站使用的配置，供參考。

<script>$(document).ready(function (){$('#posts-content').infinitescroll({navSelector : "nav.pagination",nextSelector : "nav.pagination a:last",itemSelector : "article",animate : false,bufferPx: 5,extraScrollPx: 50,loading: {speed: 'fast',selector: null,msgText: '加載中...',finishedMsg:'<div class="post-loading">沒有更多了</div>'}});}); </script>

更多參數配置可參見：infinite-scroll

本博客主題項目地址

總結

以上是生活随笔為你收集整理的使用infinite-scroll实现Ghost博文列表的滚动加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。