上拉數據加載
最近項目中需要對大量數據進行處理，鑒於項目是移動端項目，就采用類似於懶加載的上拉加載進行數據處理。
網上也找了很多插件，最后感覺挺繁瑣，干脆自己走了一個簡單的邏輯進行處理，話不多說，貼代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上拉加載數據測試</title> <meta name="viewport" content="width=device-width"> <style> .cont p{ height: 200px; line-height: 200px; font-size: 26px; text-align: center; width: 100%; border-bottom: 1px solid #ddd; } </style> </head> <body> <div class="cont"> <p>第1頁</p> <p>第2頁</p> <p>第3頁</p> <p>第4頁</p> <p>第5頁</p> <p>第6頁</p> <p>第7頁</p> <p>第8頁</p> <p>第9頁</p> <p>第10頁</p> </div> </body> <script src="js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> loadData(); function loadData(){ var range = 50,maxpage = 5,page = 1,totalHeight=0; $(window).scroll(function(){ var scrollHeight = $(window).scrollTop();//頁面卷起的高度 totalHeight = parseFloat($(window).height())+parseFloat(scrollHeight);//頁面文檔高度+頁面卷起的高度頁面卷起的高度 if(($(document).height()-range) <= totalHeight && page != maxpage){ $('.cont').append('<p>增添條數</p>'); page++; } }) } /*實際項目中maxPage並不是前端進行寫死的值，這里只是一個簡單的demo，實際中前端實現上拉加載對於后台來說是分頁功能實現。 * 因此實際中最大頁碼數應該是由后台進行返回的 * range是元素底部距離可視區高度差值，保證了用戶在上拉加載的時候的體驗度。 * */ </script> </html>