1. 程式人生 > >Vue.js 開發實踐:實現精巧的無限載入與分頁功能

Vue.js 開發實踐:實現精巧的無限載入與分頁功能

https://segmentfault.com/a/1190000005351971#articleHeader9

需求分析

當一個頁面中資訊量過大時(例如一個新聞列表中有200條新聞需要展示),就會產生問題,例如:

資料量過大,影響載入速度
使用者體驗差,很難定位到之前自己看過的某篇文章
擴充套件性差,如果200條變為2000條或者更多

所以常見的解決思路就是至底時載入資料或者分頁展示。無限載入的實現過程類似於:
ajax類方法獲取資料
資料存入本地陣列
陣列中的每條資料對應插入一個HTML模板片段中
將HTML片段append到節點中

前端分頁的實現過程類似於:
ajax類方法獲取資料
資料替換本地陣列
陣列中的每條資料對應插入一個HTML模板片段中
清空節點後將HTML片段append到節點中

往往修改或者維護程式碼時,我們會發現渲染HTML和插入部分是比較煩人的。因為我們需要將HTML拼接成字串,在對應的位置插入資料,往往就是一段非常長的字串,之後想要加個class都費勁。es6的模板字串讓這個情況有所好轉,但是依然有瑕疵(例如實際編寫時無法HTML程式碼高亮)。

同時我們還需要寫不少for或者forEach去迴圈陣列,再命令式的append,如果這段程式碼片段有一些複雜的互動,可能還需要通過事件代理繫結一堆方法。

如果在完成這類業務時,你也遇到過上述的問題,那麼你就會發現Vue真是太coooooool了,let’s vue!

先從完成載入更多功能入手。為了和之後的分頁保持一致,我的頁面準備由兩部分組成,一是資訊列表,二是底部的一個載入更多的按鈕

這個先到這這裡

我得知我要做的功能是:Vue實現下滑到底部載入固定幾條資料