Implementation of paging query in weUI

This paper introduces the implementation of h5 paging query in mobile terminal

1. front end html

Front end implementation based on weui style library reference 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="Search for what you want" 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>Search for what you want</span>
11                 </label>
12             </form>
13             <button type="button" class="btn btn-info btn-xs" style="margin-left:5px" id="btn-search">search</button>
14            
15         </div>

2.js front end paging

 1             //global variable
 2             var load = false; // load To determine whether the interface requests completion,Prevent multiple touch and multiple click from causing multiple request errors of the interface
 3             var page = 1;//Default first page
 4             
 5             $(function () {
 6                 getData(page, "/Home/GetProListJson"); //Initialize data request from first page data            
 7             });
 8 
 9             //Request background data
10             function getData(page, url) {  //Method of requesting interface, method with page,url Two parameters.
11                 $('#more').text('Loading...');
12                 $.ajax({
13                     url: url,  //Request interface's url
14                     type: 'get',//Request method( post or get)Default is get
15                     async: true,  //By default it is true Indicates that all requests are asynchronous. If you want to be synchronous, use the false
16                     cache: false,//Default is false,Set to false Request information will not be loaded from the browser cache.
17                     dataType: "json",
18                     data: {
19                         'page': page,
20                         'limit': 6,
21                         'name': $("#searchInput").val()
22                     },
23                     success: function (data) {  //Callback function requested to call successfully
24                         if (data.code == 0) {
25                             $("#pageNum").val(parseInt(data.currentPage) + 1);
26                             showList(data);
27                             if (data.currentPage >= data.totalPage) { //Here, judge whether the interface data is at the bottom
28                                 load = true;
29                                 $("#more").html('It's all over');
30                             } else if (data.currentPage < data.totalPage) {
31                                 load = false;
32                                 $("#more").html('View more');
33                             }
34                         }
35                     },
36                     error: function (error) { //Callback function called by request failure
37                         console.log(error);
38                     }
39                 });
40             }
41             //Display data
42             function showList(data) {   //Show list's html content
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'>Free collection</a></div>";
53                     $("#goodslist").append(html);
54 
55                 }
56             }
57             //Continue to load the button event, and click the button to request the data for page replacement
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             //Search function
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             //==============Core code=============  
79             //The mouse scrolls down to load the next page data, or the mobile terminal scrolls down to load the next page data
80             var winH = $(window).height(); //Height of page visual area  
81             var scrollHandler = function () {
82                 var pageH = $(document.body).height();
83                 var scrollT = $(window).scrollTop(); //scroll bar top   
84                 var aa = (pageH - winH - scrollT) / winH;
85                 if (aa < 0.02) {//0.02 It's a parameter. 
86                     if (load == false) {
87                         load = true;
88                         page = $("#pageNum").val();
89                         getData(page, "/Home/GetProListJson");
90                     }
91 
92                 }
93             }
94             //Define mouse scroll events  
95             $(window).scroll(scrollHandler);  

3. Back end data interface

The back-end implementation is relatively simple. As long as you pay attention to the definition of the json data format, here only the controller implementation code is introduced

 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         }

4. summary

1. First define the request parameters, which are {page ': page, limit': 6, 'name': $("ා searchInput"). Val()}

2. Determine which parameters are obtained from the page. For example, query the parameter name here. Determine which parameters are dynamically changing. In this case, page

3. Change of page state, for example, there are two states: data loaded and data not loaded

4. There is also the encapsulation of js methods. Pay attention to the principle of single function. After all, js is also an object-oriented language

Tags: Javascript Mobile JSON

Posted on Mon, 02 Dec 2019 16:12:24 -0500 by astropirate