Infinite Scroll 自動捲動換頁的客製化選項

Infinite ScrollPaul Irish 編寫維護的一套自動換頁 plugin。他的運作原理是透過 JS 去讀取網頁上的分頁連結 (Pagination)、然後在網頁捲動到接近分頁連結位置的時候自動去抓下一頁的內容、然後插入到目前內容的結尾處。像是 Pinterest 這類的 UI 用的就是類似的概念。

基本用法

Infite Scroll 的基本用法是,你先指定好用來包內容的元件 (Content Container),然後告訴他分頁連結在哪裡、網頁裡面要抓什麼元件回來,剩下的他就會幫你搞定。甚至還幫你準備好了 loading 的提示動畫,會幫你插在目前內容的尾端。假設我是一個公告系統,想要讓我的公告可以一直無限捲動的話,可以這樣寫:

只要這四個基本要素,就可以完成無限捲動的自動換頁功能了。另外文件上也有提到,如果你中間想要暫停或恢復無限捲動的功能,可以使用 pauseresume 方法:

    $('#announcements').infinitescroll('pause');
    $('#announcements').infinitescroll('resume');

客製化 Infinite Scroll Plugin

Infinite Scroll plugin 蠻簡單好用,不過如果需要修改部分預設行為、讓他可以跟其他程式互動的話,文件上就沒有寫得那麼詳細了。下面介紹兩個可自定的選項,讓 Infinite Scroll 更彈性。

在取回次頁內容後做加工處理

一開始在設定 Infinite Scroll 的時候,可以指定一個 callback 函數給它;它會在次頁的內容已經被抓回來、並且插入 container 之後被呼叫。用法是在那個選項的 hash 後面多傳一個函數作為參數:

你在 callback 裡面會拿到三個參數,分別是:

  1. 剛抓回來的元件陣列 (Array)
  2. Infinite Scroll 目前的選項清單 (Hash)
  3. 剛抓回來那頁的位址 (String)

由於這個 callback 是在 Infinite Scroll 內部的 _loadcallback() 當中被呼叫,呼叫的時候抓回來的元件(例如上面的 .post)已經被插在容器元件裡面了。不過還算來得及多做點什麼加工。

自定載入中提示

Infinite Scroll 在載入次頁內容的時候,會幫你顯示一個「載入中」的動畫與提示文字。如果你希望可以用別的方法來提示使用者目前正在載入中,而不想要用它預設的的方法的話,你可以傳兩個函數去分別處理「開始載入」跟「載入完成」時的行為。傳入的方法是在一開始設定的時候,先傳進它的選項裡面:

只要有指定 start 時的 function,預設的提示動畫就不會出現。但是特別要注意的是,在 Infinite Scroll 中啟動 Ajax 的部分是放在預設的 loading.start 裡面的。所以如果你用自定的 start function 去蓋掉了預設的函數,就要手動去告訴 Infinite Scroll 開始跑 Ajax 抓內容。

首先你要先拿到 Infinite Scroll 目前綁定在容器元件上的物件實體 (Instance),然後對它呼叫 beginAjax() 方法;同時要把你在 start function 裡面拿到的參數(那是 Infinite Scroll 目前實體的設定清單)傳給 beginAjax(),它才會開始動。還好 Infinite Scroll 會把它的物件實體掛在容器的 jQuery Data 上,只要透過 $(container).data('infinitescroll') 就可以拿到它的物件實體了。

在處理 finished 的時候,通常就是把你自定的載入提示給關掉,這邊應該比 start 簡單。

偵測是否已經捲到底(已經抓到最後一頁)

對 Infinite Scroll 來說,抓到最後一頁的時候會因為「沒有再下一頁可以抓了」而觸發一個「done 錯誤」。所以如果你需要在捲到底的時候做些什麼事情(例如顯示自定的提示訊息),你需要把你的程式碼掛在 errorCallback 下面。

掛在 errorCallback 的函數,會在發生各種錯誤的時候被觸發。你會拿到一個參數,告訴你現在是發生什麼錯誤。如果它是 "done",就表示你捲到底了。

參考資源

  1. Infinite Scroll Github Repository
comments powered by Disqus