一、瀑布流分頁案例分析
1.1) 功能分析：
鼠標下拉，加載分頁數據(10條) ，如下圖：
1.2) 如何確定當前顯示的數據已經瀏覽完畢？
公式：(滾動條距底部的距離 + 滾動條上下滾動的距離 + 當前窗口的高度) >= 當前文檔的高度
舉例：
- 當前文檔高度：存儲10條數據，100px。
- 滾動條距底部的距離：1px。
- 當前窗口的高度：80px。
- 滾動條上下滾動的距離：>=19px。
因為文檔高度不確定，不能只判斷 滾動條上下滾動的距離大於等於19px。即要判斷： 滾動條距底部的距離1px+當前窗口的高度80px +滾動條上下滾動的距離19px >=當前文檔的高度。
1.3) 前置知識點：
$(function(){}) 頁面加載事件
$(window) 獲取當前窗口對象
scroll() 鼠標滾動事件
$(window).height() 當前窗口的高度
$(window).scrollTop() 滾動條上下滾動的距離
$(document).height() 當前文檔高度
二、實現思路和代碼
2.1）頁面實現思路：
1. 定義發送請求標記。(控制是否發起請求,如果當前處於請求狀態,就不能再去發請求,只有在請求完畢才能重新發起請求,類似於多線程裏的等待喚醒機制)
2. 定義當前頁碼和每頁顯示的條數。 (分頁必備的兩個參數)
3. 定義滾動條距底部的距離。(可以設置固定值1就可以)
4. 設置頁面加載事件。(事件裏完成後續功能)
5. 為當前窗口綁定滾動條滾動事件。()
6. 獲取必要信息(當前窗口的高度,滾動條上下滾動的距離,當前文檔的高度)。
7. 計算當前展示數據是否瀏覽完畢。(瀏覽完畢需要發起請求)
8. 判斷請求標記是否為 true。
9. 為true,將請求標記置為 false，當前異步操作完成前，不能重新發起請求。
10. 根據當前頁和每頁顯示的條數來請求查詢分頁數據。
11. 當前頁碼+1。
頁面和代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>網站首頁</title> <link rel="stylesheet" href="css/tt.css"> </head> <body> <div class="top"> <span class="top-left">下載APP</span> <span class="top-left"> 北京 晴天</span> <span class="top-right">更多產品</span> </div> <div class="container"> <div class="left"> <a> <img src="img/logo.png"><br/> </a> <ul> <li> <a class="channel-item active" href="#"> <span> 推薦 </span> </a> </li> <li><a class="channel-item" href="#"> <span> 視頻 </span> </a></li> <li><a class="channel-item" href="#"> <span> 熱點 </span> </a></li> <li><a class="channel-item" href="#"> <span> 直播 </span> </a></li> <li><a class="channel-item" href="#"> <span> 圖片 </span> </a></li> <li><a class="channel-item" href="#"> <span> 娛樂 </span> </a></li> <li><a class="channel-item" href="#"> <span> 遊戲 </span> </a></li> <li><a class="channel-item" href="#"> <span> 體育 </span> </a></li> </ul> </div> <div class="center"> <ul class="news_list"> <li> <div class="title-box"> <a href="#" class="link"> 這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！1 <hr> </a> </div> </li> <li> <div class="title-box"> <a href="#" class="link"> 這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！2 <hr> </a> </div> </li> <li> <div class="title-box"> <a href="#" class="link"> 這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！3 <hr> </a> </div> </li> <li> <div class="title-box"> <a href="#" class="link"> 這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！4 <hr> </a> </div> </li> <li> <div class="title-box"> <a href="#" class="link"> 這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！5 <hr> </a> </div> </li> <li> <div class="title-box"> <a href="#" class="link"> 這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！6 <hr> </a> </div> </li> <li> <div class="title-box"> <a href="#" class="link"> 這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！7 <hr> </a> </div> </li> <li> <div class="title-box"> <a href="#" class="link"> 這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！8 <hr> </a> </div> </li> <li> <div class="title-box"> <a href="#" class="link"> 這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！9 <hr> </a> </div> </li> <li> <div class="title-box"> <a href="#" class="link"> 這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！這裏是內容 ！10 <hr> </a> </div> </li> </ul> <div class="loading" style="text-align: center; height: 80px"> <img src="img/loading2.gif" height="100%"> </div> <div class="content"> <div class="pagination-holder clearfix"> <div id="light-pagination" class="pagination"></div> </div> </div> <div id="no" style="text-align: center;color: red;font-size: 20px"></div> </div> </div> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //1.定義發送請求標記 let send = true; //2.定義當前頁碼和每頁顯示的條數 let start = 1; let pageSize = 10; //3.定義滾動條距底部的距離 let bottom = 1;//px //4.設置頁面加載事件 $(function () { //5.為當前窗口綁定滾動條滾動事件 $(window).scroll(function () { //6.獲取必要信息，用於計算當前展示數據是否瀏覽完畢 //當前窗口的高度 let windowHeight = $(window).height(); //滾動條從上到下滾動距離 let scrollTop = $(window).scrollTop(); //當前文檔的高度 let docHeight = $(document).height(); //7.計算當前展示數據是否瀏覽完畢 //當 滾動條距底部的距離 + 當前滾動條滾動的距離 + 當前窗口的高度 >= 當前文檔的高度 if((bottom + scrollTop + windowHeight) >= docHeight) { //8.判斷請求標記是否為true if(send == true) { //9.將請求標記置為false，當前異步操作完成前，不能重新發起請求。 send = false; //10.根據當前頁和每頁顯示的條數來 請求查詢分頁數據 queryByPage(start,pageSize); //11.當前頁碼+1 start++; } } }); }); //定義查詢分頁數據的函數 function queryByPage(start,pageSize){ //加載動圖顯示 $(".loading").show(); //發起AJAX請求 $.ajax({ //請求的資源路徑 url:"newsServlet", //請求的參數 data:{"start":start,"pageSize":pageSize}, //請求的方式 type:"POST", //響應數據形式 dataType:"json", //請求成功後的回調函數 success:function (data) { if(data.length == 0) { $(".loading").hide(); $("#no").html("加載完畢..."); return; } //加載動圖隱藏 $(".loading").hide(); //將數據顯示 let titles = ""; for(let i = 0; i < data.length; i++) { titles += "<li>\n" + " <div class=\"title-box\">\n" + " <a href=\"#\" class=\"link\">\n" + data[i].title + " <hr>\n" + " </a>\n" + " </div>\n" + " </li>"; } //顯示到頁面 $(".news_list").append(titles); //將請求標記設置為true send = true; } }); } </script> </html>
2.2）服務器實現思路：
1. 獲取請求參數(當前頁,每頁顯示的條數)。
2. 根據當前頁碼和每頁顯示的條數，調用業務層的方法，得到分頁 Page 對象。
3. 將得到的數據轉為 json。
4. 將數據響應給客户端。
服務器代碼:
public class NewsServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //設置請求和響應的編碼 req.setCharacterEncoding("UTF-8"); resp.setContentType("text/html;charset=UTF-8"); //1.獲取請求參數 String start = req.getParameter("start"); String pageSize = req.getParameter("pageSize"); //2.根據當前頁碼和每頁顯示的條數來調用業務層的查詢方法，得到分頁Page對象 Page page = service.pageQuery(Integer.parseInt(start), Integer.parseInt(pageSize)); //3.將得到的數據轉為JSON String json = new ObjectMapper().writeValueAsString(page); try { Thread.sleep(1000); } catch (InterruptedException e) { e.printStackTrace(); } //4.將數據響應給客户端 resp.getWriter().write(json); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req,resp); } }
成功實現。
