本文旨在介紹移動端h5分頁查詢實現 1.前端html 前端基於weui 樣式庫實現 參考http://jqweui.com/ 1 <div class="weui-search-bar" id="searchBar"> 2 <form class="weui-search-bar__form"> 3 ...
本文旨在介紹移動端h5分頁查詢實現
1.前端html
前端基於weui 樣式庫實現 參考http://jqweui.com/
1 <div class="weui-search-bar" id="searchBar"> 2 <form class="weui-search-bar__form"> 3 <div class="weui-search-bar__box"> 4 <i class="weui-icon-search"></i> 5 <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索您想要的商品" required=required /> 6 <a href="javascript:" class="weui-icon-clear" id="searchClear"></a> 7 </div> 8 <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);"> 9 <i class="weui-icon-search" id="search"></i> 10 <span>搜索您想要的商品</span> 11 </label> 12 </form> 13 <button type="button" class="btn btn-info btn-xs" style="margin-left:5px" id="btn-search">搜索</button> 14 15 </div>View Code
2.js前端分頁
1 //全局變數 2 var load = false; // load為判斷介面是否請求完成,防止多次觸摸、多次點擊導致介面的多次請求出錯 3 var page = 1;//預設第一頁 4 5 $(function () { 6 getData(page, "/Home/GetProListJson"); //初始化數據從第一頁數據開始請求 7 }); 8 9 //請求後臺數據 10 function getData(page, url) { //請求介面的方法，方法帶page，url兩個參數。 11 $('#more').text('正在載入中...'); 12 $.ajax({ 13 url: url, //請求介面的url 14 type: 'get',//請求方式（post或get）預設為get 15 async: true, //預設情況下是true表示所有請求為非同步請求，如果要為同步則用false 16 cache: false,//預設為false，設置為false將不會從瀏覽器緩存中載入請求信息。 17 dataType: "json", 18 data: { 19 'page': page, 20 'limit': 6, 21 'name': $("#searchInput").val() 22 }, 23 success: function (data) { //請求成功調用的回調函數 24 if (data.code == 0) { 25 $("#pageNum").val(parseInt(data.currentPage) + 1); 26 showList(data); 27 if (data.currentPage >= data.totalPage) { //這裡判斷介面數據是否到底部 28 load = true; 29 $("#more").html('已經到底了'); 30 } else if (data.currentPage < data.totalPage) { 31 load = false; 32 $("#more").html('查看更多'); 33 } 34 } 35 }, 36 error: function (error) { //請求失敗調用的回調函數 37 console.log(error); 38 } 39 }); 40 } 41 //顯示數據 42 function showList(data) { //顯示列表的html內容 43 for (var i = 0; i < data.list.length; i++) { 44 var html = "<li>" 45 html += "<a href='/Home/ProInfo?id=" + data.list[i].Goods_Id + "'>" 46 html += " <div class='proimg'><img src='" + data.list[i].Img_Url + "' /></div>"; 47 html += " </a>"; 48 html += " <div class='protxt'>"; 49 html += " <div class='name'>" + data.list[i].Goods_Name + "</div>"; 50 html += " <div class='wy-pro-pri'>¥<span>" + data.list[i].Goods_Price + "</span></div>"; 51 html += "</div>"; 52 html += "<div class='button_sp_area'><a href='javascript: ;' class='weui-btn weui_btn_mini weui-btn_primary' id='btn-mianfei'>免費領取</a></div>"; 53 $("#goodslist").append(html); 54 55 } 56 } 57 //繼續載入按鈕事件 ，點擊按鈕後請求換頁的數據 58 $(document).on("click", '#more', function () { 59 if (load == false) { 60 $("#goodslist").append(html); 61 load = true; 62 $("#pageNum").val(1); 63 page = $("#pageNum").val(); 64 getData(page, "/Home/GetProListJson"); 65 } 66 }) 67 //搜索功能 68 $(document).on("click", "#btn-search", function () { 69 if (load == false) { 70 $("#goodslist").empty(); 71 load = true; 72 $("#pageNum").val(1); 73 page = $("#pageNum").val(); 74 getData(page, "/Home/GetProListJson"); 75 } 76 }); 77 78 //==============核心代碼============= 79 //滑鼠向下滾動載入下一頁數據，或者移動端向下滑動載入下一頁數據 80 var winH = $(window).height(); //頁面可視區域高度 81 var scrollHandler = function () { 82 var pageH = $(document.body).height(); 83 var scrollT = $(window).scrollTop(); //滾動條top 84 var aa = (pageH - winH - scrollT) / winH; 85 if (aa < 0.02) {//0.02是個參數 86 if (load == false) { 87 load = true; 88 page = $("#pageNum").val(); 89 getData(page, "/Home/GetProListJson"); 90 } 91 92 } 93 } 94 //定義滑鼠滾動事件 95 $(window).scroll(scrollHandler);View Code
3.後端數據介面
後端實現比較簡單，只要註意返回json數據格式的定義，這裡只介紹下控制器實現代碼
1 [HttpGet] 2 public ActionResult GetProListJson(Pagination pagination) 3 { 4 var ret = new 5 { 6 code = 0, 7 msg = "", 8 list = goodsApp.GetList(Request["name"], pagination), 9 currentPage = pagination.page, 10 count = pagination.total, 11 totalPage= pagination.total/pagination.limit 12 }; 13 return Content(ret.ToJson()); 14 }View Code
4.總結
1.首先定義請求參數，這裡面參數是{'page': page,limit': 6,'name': $("#searchInput").val()}
2.確定哪些參數是從頁面獲取，比如這裡面查詢參數name；確定哪些參數是動態變化的，這裡面是page
3.頁面狀態的變化，比如在這有兩種狀態，數據已載入完和未載入完
4.還有js方法的封裝，註意單一職能原則，畢竟js也是面向對象的語言
