本文章參考:http://www.cnblogs.com/ssrsblogs/p/6108423.html
分析:
1.需要判斷滾動條是否到底部:
需要用到DOM的三個屬性值,即scrollTop、clientHeight、scrollHeight。
scrollTop為滾動條在Y軸上的滾動距離。
clientHeight為內容可視區域的高度。
scrollHeight為內容可視區域的高度加上溢出(滾動)的距離。
從這個三個屬性的介紹就可以看出來,滾動條到底部的條件即為scrollTop + clientHeight == scrollHeight。(兼容不同的瀏覽器)。
vue的生命周期:參考:https://segmentfault.com/a/1190000008010666
在vue的頁面組件中有一個created 時期,在這里給窗口加上窗口滾動的監聽
例:
判斷,到達窗口底部的時候,執行自定義的get方法
自定義的get就是向后台發送請求數據的方法,其中每次調用后都執行 page++
這樣才能保證每次請求的數據不重復
至於在后台的方法,主要是部分:
$num = 5; //$num是自定的每次請求的條數
$start = page*$num
然后使用 limit 及 offset 查詢:參考:http://blog.csdn.net/u012927188/article/details/41957879
經常用到在數據庫中查詢中間幾條數據的需求
比如下面的sql語句:
① selete * from testtable limit 2,1;
② selete * from testtable limit 2 offset 1;
注意:
1.數據庫數據計算是從0開始的
2.offset X是跳過X個數據,limit Y是選取Y個數據
3.limit X,Y 中X表示跳過X個數據,讀取Y個數據
這兩個都是能完成需要,但是他們之間是有區別的:
①是從數據庫中第三條開始查詢,取一條數據,即第三條數據讀取,一二條跳過
②是從數據庫中的第二條數據開始查詢兩條數據,即第二條和第三條。
最后把查詢的結果返回給剛剛請求該方法的get()中的ajax或axios
之后,使用
將新查詢到的結果添加到之前在頁面中渲染的數組,這樣就可以實現瀑布流加載
注:
為了美觀,如果使用一些loading及loadmore組件給用戶一個等待的緩沖,一定要特別注意讓這些組件顯示的時機的條件
最后,希望這篇文章可以幫助到和我一樣項目經驗淺的人,
如需轉載,請注明出處:http://www.cnblogs.com/zhuchenglin/p/6841990.html