當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

上拉数据加载

發布時間：2024/1/17 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了上拉数据加载小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

上拉數據加載

最近項目中需要對大量數據進行處理，鑒于項目是移動端項目，就采用類似于懶加載的上拉加載進行數據處理。

網上也找了很多插件，最后感覺挺繁瑣，干脆自己走了一個簡單的邏輯進行處理，話不多說，貼代碼：

<!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

總結

以上是生活随笔為你收集整理的上拉数据加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。