weUI之分页查询实现

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

1.前端html

    前端基于weui 样式库实现   参考http://jqweui.com/

  <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索您想要的商品" required=required />
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                    <i class="weui-icon-search" id="search"></i>
                    <span>搜索您想要的商品</span>
                </label>
            </form>
            <button type="button" class="btn btn-info btn-xs" style="margin-left:5px" id="btn-search">搜索</button>
           
        </div>

2.js前端分页

            //全局变量
            var load = false; // load为判断接口是否请求完成,防止多次触摸、多次点击导致接口的多次请求出错
            var page = 1;//默认第一页
            
            $(function () {
                getData(page, "/Home/GetProListJson"); //初始化数据从第一页数据开始请求            
            });

            //请求后台数据
            function getData(page, url) {  //请求接口的方法，方法带page，url两个参数。
                $('#more').text('正在加载中...');
                $.ajax({
                    url: url,  //请求接口的url
                    type: 'get',//请求方式（post或get）默认为get
                    async: true,  //默认情况下是true表示所有请求为异步请求，如果要为同步则用false
                    cache: false,//默认为false，设置为false将不会从浏览器缓存中加载请求信息。
                    dataType: "json",
                    data: {
                        'page': page,
                        'limit': 6,
                        'name': $("#searchInput").val()
                    },
                    success: function (data) {  //请求成功调用的回调函数
                        if (data.code == 0) {
                            $("#pageNum").val(parseInt(data.currentPage) + 1);
                            showList(data);
                            if (data.currentPage >= data.totalPage) { //这里判断接口数据是否到底部
                                load = true;
                                $("#more").html('已经到底了');
                            } else if (data.currentPage < data.totalPage) {
                                load = false;
                                $("#more").html('查看更多');
                            }
                        }
                    },
                    error: function (error) { //请求失败调用的回调函数
                        console.log(error);
                    }
                });
            }
            //显示数据
            function showList(data) {   //显示列表的html内容
                for (var i = 0; i < data.list.length; i++) {
                    var html = "<li>"
                    html += "<a href='/Home/ProInfo?id=" + data.list[i].Goods_Id + "'>"
                    html += " <div class='proimg'><img src='" + data.list[i].Img_Url + "' /></div>";
                    html += " </a>";
                    html += " <div class='protxt'>";
                    html += " <div class='name'>" + data.list[i].Goods_Name + "</div>";
                    html += " <div class='wy-pro-pri'>¥<span>" + data.list[i].Goods_Price + "</span></div>";
                    html += "</div>";
                    html += "<div class='button_sp_area'><a href='javascript: ;' class='weui-btn weui_btn_mini weui-btn_primary' id='btn-mianfei'>免费领取</a></div>";
                    $("#goodslist").append(html);

                }
            }
            //继续加载按钮事件  ，点击按钮后请求换页的数据
            $(document).on("click", '#more', function () {
                if (load == false) {
                    $("#goodslist").append(html);
                    load = true;
                    $("#pageNum").val(1);
                    page = $("#pageNum").val();
                    getData(page, "/Home/GetProListJson");
                }
            }) 
            //搜索功能
            $(document).on("click", "#btn-search", function () {
                if (load == false) {
                    $("#goodslist").empty();
                    load = true;
                    $("#pageNum").val(1);
                    page = $("#pageNum").val();
                    getData(page, "/Home/GetProListJson");
                }
            });

            //==============核心代码=============  
            //鼠标向下滚动加载下一页数据，或者移动端向下滑动加载下一页数据
            var winH = $(window).height(); //页面可视区域高度  
            var scrollHandler = function () {
                var pageH = $(document.body).height();
                var scrollT = $(window).scrollTop(); //滚动条top   
                var aa = (pageH - winH - scrollT) / winH;
                if (aa < 0.02) {//0.02是个参数 
                    if (load == false) {
                        load = true;
                        page = $("#pageNum").val();
                        getData(page, "/Home/GetProListJson");
                    }

                }
            }
            //定义鼠标滚动事件  
            $(window).scroll(scrollHandler);  

3.后端数据接口

后端实现比较简单，只要注意返回json数据格式的定义，这里只介绍下控制器实现代码

        [HttpGet]
        public ActionResult GetProListJson(Pagination pagination)
        {
            var ret = new
            {            
                code = 0,
                msg = "",
                list = goodsApp.GetList(Request["name"], pagination),
                currentPage = pagination.page,
                count = pagination.total,
                totalPage= pagination.total/pagination.limit
            };
            return Content(ret.ToJson());
        }

4.总结

   1.首先定义请求参数，这里面参数是{'page': page,limit': 6,'name': $("#searchInput").val()}

   2.确定哪些参数是从页面获取，比如这里面查询参数name；确定哪些参数是动态变化的，这里面是page 

   3.页面状态的变化，比如在这有两种状态，数据已加载完和未加载完

   4.还有js方法的封装，注意单一职能原则，毕竟js也是面向对象的语言