欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

weUI之分页查询实现

程序员文章站 2022-03-11 07:53:15
本文旨在介绍移动端h5分页查询实现 1.前端html 前端基于weui 样式库实现 参考http://jqweui.com/ 1

本文旨在介绍移动端h5分页查询实现

1.前端html

    前端基于weui 样式库实现   参考

weUI之分页查询实现
 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前端分页

weUI之分页查询实现
 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数据格式的定义,这里只介绍下控制器实现代码

weUI之分页查询实现
 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也是面向对象的语言