上拉数据加载
上拉數據加載
最近項目中需要對大量數據進行處理，鑒于項目是移動端項目，就采用類似于懶加載的上拉加載進行數據處理。
網上也找了很多插件，最后感覺挺繁瑣，干脆自己走了一個簡單的邏輯進行處理，話不多說，貼代碼：
<!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>?
轉載于:https://www.cnblogs.com/DreamerLeaf/p/7058676.html
總結
- 上一篇： IO(File 递归)
- 下一篇： 性能测试关注点整理总结！