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 id="searchBar"> 2 <form> 3 <div> 4 <i></i> 5 <input type="search" id="searchInput" placeholder="Search for what you want" required=required /> 6 <a href="javascript:" id="searchClear"></a> 7 </div> 8 <label id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);"> 9 <i id="search"></i> 10 <span>Search for what you want</span> 11 </label> 12 </form> 13 <button type="button" 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><img src='" + data.list[i].Img_Url + "' /></div>"; 47 html += " </a>"; 48 html += " <div>"; 49 html += " <div>" + data.list[i].Goods_Name + "</div>"; 50 html += " <div>¥<span>" + data.list[i].Goods_Price + "</span></div>"; 51 html += "</div>"; 52 html += "<div><a href='javascript: ;' 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
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