weUI之分頁查詢實現

時間 2019-11-14

標籤 weui 分頁查詢實現简体版

原文原文鏈接

本文旨在介紹移動端h5分頁查詢實現javascript

1.前端html

前端基於weui 樣式庫實現參考http://jqweui.com/html

 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         }