js实现跨平台滑动加载

一、原理讲解

　　1、首先，用一个有固定高度的div作为list，并将其overflow-y设置为auto或visible

　　2、当滑动到底部时，在list div底部插入加载效果元素，并向服务器请求数据，请求时发送请求的页数（当前页数+1）索引与搜索关键字。

　　3、服务器返回的数据可以是html、json、xml等数据，如果是html，则将其插入到list，如果是json或xml则生成html后插入到list。插入之后将当前页数+1，如果服务器返回的数据为空，则当前页数不变。不管请求是否成功，是否返回数据，都将加载效果元素从list中移除。

二、简单实现

　　本实现服务端用的是ASP.NET Core，滑动加载时返回的HTML。

　　1、先贴后台代码

        public IActionResult SlidingLoading(string kw, int pageIndex = 1)
        {
            var list = new List<string>();
            for (int i = 1; i <= 10; i++)
            {
                list.Add($"第{(pageIndex - 1) * 10 + i}条数据");
            }
            //ajax加载返回列表项
            if (Request.Headers.ContainsKey("X-Requested-With"))
            {
                if(Request.Headers["X-Requested-With"] == "XMLHttpRequest")
                {
                    return View("SlidingLoading.partial", list);
                }
            }
            //否则返回主页
            return View(list);
        }

　　2、再贴JS代码

function SlidingLoading() {
    var _this = this;
    //当前搜索关键字，搜素后滑动加载时保持不变，除非重新搜索
    var keyword = "";
    //layer弹出层索引
    var layerIndex = 0;
    //记录一个值，该值为当前是否在加载中，1：加载中，0不在加载中
    var flagloading = 0;
    //加载中效果元素
    var $loading = $("<div>", { class: "loading" }).html("<i class=''></i><label>加载中...</label>");
    //空列表效果元素
    var $empty = $("<div>", { class: "empty" }).html("<i class=''></i><label>暂无记录</label>");
    // 列表jquery对象
    var $list;
    //搜索框jquery对象
    var $kw;
    var defaults = {
        url : "",//请求数据的url
        pageIndex : 0,//初始列表页数
        kwSelector : "#kw",//搜索框
        itemSelector : ".item",//列表项
        listSelector: ".list",//列表
        btnSelector: "#btn-search",//搜索按钮
        //生成 请求数据时发送给服务器的数据（默认返回JSON），其他请重写
        //获取请求页数与搜索关键字
        //bsearch，为true则将请求页数至为1，否则加1，重写时可根据此参数确定返回的页数
        //覆盖此方法时应很小心，必须返回请求的页数
        getJson: function (bsearch) {
            if (bsearch) {
                return { pageIndex: 1, kw: $kw.val() };
            }
            else {
                return { pageIndex: defaults.pageIndex + 1, kw: $kw.val() }
            }
        }
    };

    //获取当前的页数
    this.getPageIndex = function () {
        return pageIndex;
    }
    //获取当前搜索关键字
    this.getKeyword = function () {
        return keyword;
    }
    //初始化
    //options可覆盖defaults
    this.init = function (options) {
        $.extend(defaults, options);
        $list = $(defaults.listSelector);
        $kw = $(defaults.kwSelector);
        //绑定滑动事件
        $list.on("scroll", function () {
            var height = this.clientHeight;
            var top = this.scrollTop;
            var totalHeight = this.scrollHeight;
            if (top + height - totalHeight == 0) {
                more();
            }
        });
        //绑定搜索框事件enter事件
        $kw.on("keypress", function (e) {
            if (e.keyCode == 13) {
                s();
            }
        });
        //绑定搜索按钮
        $(defaults.btnSelector).click(s);
    }
    //搜索
    function s() {
        //当前在加载中就返回
        if (flagloading != 0) {
            return;
        }
        flagloading = 1;
        //显示搜索动画
        layerIndex = layer.open({ type: 2 });
        keyword = $kw.val();
        $.ajax({
            url: defaults.url,
            data: defaults.getJson(true),
            type: "post",
            beforeSend: function () { },
            success: function (data) {
                //搜索成功后移除所有列表项
                $list.children(defaults.itemSelector).remove();
                //如果返回的列表项不为空
                if (data.trim()) {
                    $empty.remove();
                    //假设返回的为html，则可以直接插入到list
                    $list.append(data);
                    //将页数至为1
                    defaults.pageIndex = 1;
                }
                else {
                    //列表为空，将空列表效果添加到list
                    $empty.appendTo($list);
                    defaults.pageIndex = 0;
                }
            },
            error: function () { },//页数不变，列表数据不清空
            complete: function () {
                //关闭搜索动画
                layer.close(layerIndex);
                //更改状态为非加载中
                flagloading = 0;
            }
        });
    }

    function more() {
        //获取当前页数
        var _pageIndex = defaults.pageIndex;
        if (flagloading == 1) {
            return;
        }
        $.ajax({
            url: defaults.url,
            type: "post",
            data: defaults.getJson(false),
            beforeSend: function () {
                $empty.remove();
                //将加载效果添加到列表
                $loading.appendTo($list);
                flagloading = 1;
            },
            success: function (data) {
                //返回数据不为空
                if (data.trim()) {
                    //假设返回的是html
                    $list.append(data);
                    //将当前页数+1
                    defaults.pageIndex += 1;
                }
                //返回数据为空
                else {
                    //当请页数为0
                    if (defaults.pageIndex == 0) {
                        //将空列表效果加入到list
                        if ($list.children(".empty").length == 0) {
                            $empty.appendTo($list);
                        }
                    }
                }
            },
            complete: function () {
                //移除加载效果
                $loading.remove();
                setTimeout(function () { flagloading = 0; }, 200);
            }
        });
    }
}

　　3、然后是示例

　　本实现有两个视图，一个是主视图，list定义在其中。一个是局部视图，用于快速生成列表项的HTML。

@using System.Collections.Generic
@model List<string>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>SlidingLoading</title>
    <link href="~/css/slidingloading.css?v=3" rel="stylesheet" />
    <style>
        .title{
            text-align:center;
            font-size:1.2rem;

        }
        .searh-wrapper{
            display:flex;   
            justify-content:center;
            padding:1rem;
        }
    </style>
</head>
<body>
    <div class="title">
        <label>轻量简易分页工具</label>
    </div>
    <div class="searh-wrapper">
        <input type="search" name="kw" id="kw" /><button id="btn-search">搜索</button>
    </div>
    <div class="list">
        @Html.Partial("SlidingLoading.partial", Model)
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/3.1.0/mobile/layer.js"></script>
    <script src="~/js/slidingloading.js"></script>
    <script>
        var pager = new SlidingLoading();
        pager.init({
            pageIndex: 1,//当前显示到第几页
            listSelector: ".list",//列表id或class
            itemSelector: ".item",//列表项的class
            btnSelector: "#btn-search",//搜索按钮
            kwSelector:"#kw",//搜索关键字输入框
        });
    </script>
</body>
</html>

@using System.Collections.Generic
@model List<string>

@foreach (var item in Model)
{
    <div class="item">
        <label>@item</label>
    </div>
}

*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}
html,body{
    width:100%;
    height:100%;
    font-size:14px;
    background-color:whitesmoke;
}
body{
    display:flex;   
    flex-direction:column;
    align-items:stretch;
}
/*列表的高度必须固定，且overflow-y必须为auto*/
.list{
    overflow-x:hidden;
    overflow-y:auto;
    position:relative;/*很重要，配合item的absolute*/
    padding-bottom:3rem;
    flex:1;
}
/*item必须是list的直接子元素*/
.list>.item{
    width:100%;
    margin-top:1rem;
    padding:2rem;
    background-color:white;
}
/*加载效果，空列表效果*/
.list > .loading,
.list > .empty {
    display:flex;
    align-items:center;
    justify-content:center;
    /*绝对定位很重要*/
    position: absolute;
    left:0;
    right:0;
    height:3rem;
    
}
.list>.loading{
    /*使加载框显示再列表最下面*/
   margin-bottom:0;
}

 

效果图