Vue.js中滾動條加載更多數據


本文章參考: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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM