一、原理讲解
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、先贴后台代码
1 public IActionResult SlidingLoading(string kw, int pageIndex = 1) 2 { 3 var list = new List (); 4 for (int i = 1; i <= 10; i++) 5 { 6 list.Add($"第{(pageIndex - 1) * 10 + i}条数据"); 7 } 8 //ajax加载返回列表项 9 if (Request.Headers.ContainsKey("X-Requested-With"))10 {11 if(Request.Headers["X-Requested-With"] == "XMLHttpRequest")12 {13 return View("SlidingLoading.partial", list);14 }15 }16 //否则返回主页17 return View(list);18 } 2、再贴JS代码
1 function SlidingLoading() { 2 var _this = this; 3 //当前搜索关键字，搜素后滑动加载时保持不变，除非重新搜索 4 var keyword = ""; 5 //layer弹出层索引 6 var layerIndex = 0; 7 //记录一个值，该值为当前是否在加载中，1：加载中，0不在加载中 8 var flagloading = 0; 9 //加载中效果元素 10 var $loading = $(" ", { class: "loading" }).html(" "); 11 //空列表效果元素 12 var $empty = $(" ", { class: "empty" }).html(" "); 13 // 列表jquery对象 14 var $list; 15 //搜索框jquery对象 16 var $kw; 17 var defaults = { 18 url : "",//请求数据的url 19 pageIndex : 0,//初始列表页数 20 kwSelector : "#kw",//搜索框 21 itemSelector : ".item",//列表项 22 listSelector: ".list",//列表 23 btnSelector: "#btn-search",//搜索按钮 24 //生成 请求数据时发送给服务器的数据（默认返回JSON），其他请重写 25 //获取请求页数与搜索关键字 26 //bsearch，为true则将请求页数至为1，否则加1，重写时可根据此参数确定返回的页数 27 //覆盖此方法时应很小心，必须返回请求的页数 28 getJson: function (bsearch) { 29 if (bsearch) { 30 return { pageIndex: 1, kw: $kw.val() }; 31 } 32 else { 33 return { pageIndex: defaults.pageIndex + 1, kw: $kw.val() } 34 } 35 } 36 }; 37 38 //获取当前的页数 39 this.getPageIndex = function () { 40 return pageIndex; 41 } 42 //获取当前搜索关键字 43 this.getKeyword = function () { 44 return keyword; 45 } 46 //初始化 47 //options可覆盖defaults 48 this.init = function (options) { 49 $.extend(defaults, options); 50 $list = $(defaults.listSelector); 51 $kw = $(defaults.kwSelector); 52 //绑定滑动事件 53 $list.on("scroll", function () { 54 var height = this.clientHeight; 55 var top = this.scrollTop; 56 var totalHeight = this.scrollHeight; 57 if (top + height - totalHeight == 0) { 58 more(); 59 } 60 }); 61 //绑定搜索框事件enter事件 62 $kw.on("keypress", function (e) { 63 if (e.keyCode == 13) { 64 s(); 65 } 66 }); 67 //绑定搜索按钮 68 $(defaults.btnSelector).click(s); 69 } 70 //搜索 71 function s() { 72 //当前在加载中就返回 73 if (flagloading != 0) { 74 return; 75 } 76 flagloading = 1; 77 //显示搜索动画 78 layerIndex = layer.open({ type: 2 }); 79 keyword = $kw.val(); 80 $.ajax({ 81 url: defaults.url, 82 data: defaults.getJson(true), 83 type: "post", 84 beforeSend: function () { }, 85 success: function (data) { 86 //搜索成功后移除所有列表项 87 $list.children(defaults.itemSelector).remove(); 88 //如果返回的列表项不为空 89 if (data.trim()) { 90 $empty.remove(); 91 //假设返回的为html，则可以直接插入到list 92 $list.append(data); 93 //将页数至为1 94 defaults.pageIndex = 1; 95 } 96 else { 97 //列表为空，将空列表效果添加到list 98 $empty.appendTo($list); 99 defaults.pageIndex = 0;100 }101 },102 error: function () { },//页数不变，列表数据不清空103 complete: function () {104 //关闭搜索动画105 layer.close(layerIndex);106 //更改状态为非加载中107 flagloading = 0;108 }109 });110 }111 112 function more() {113 //获取当前页数114 var _pageIndex = defaults.pageIndex;115 if (flagloading == 1) {116 return;117 }118 $.ajax({119 url: defaults.url,120 type: "post",121 data: defaults.getJson(false),122 beforeSend: function () {123 $empty.remove();124 //将加载效果添加到列表125 $loading.appendTo($list);126 flagloading = 1;127 },128 success: function (data) {129 //返回数据不为空130 if (data.trim()) {131 //假设返回的是html132 $list.append(data);133 //将当前页数+1134 defaults.pageIndex += 1;135 }136 //返回数据为空137 else {138 //当请页数为0139 if (defaults.pageIndex == 0) {140 //将空列表效果加入到list141 if ($list.children(".empty").length == 0) {142 $empty.appendTo($list);143 }144 }145 }146 },147 complete: function () {148 //移除加载效果149 $loading.remove();150 setTimeout(function () { flagloading = 0; }, 200);151 }152 });153 }154 } 3、然后是示例
本实现有两个视图，一个是主视图，list定义在其中。一个是局部视图，用于快速生成列表项的HTML。
1 @using System.Collections.Generic 2 @model List3 @{ 4 Layout = null; 5 } 6 7 8 9 10 11 12 SlidingLoading 13 14 26 27 2829 303132 333435 @Html.Partial("SlidingLoading.partial", Model)3637 38 39 40 50 51
1 @using System.Collections.Generic2 @model List3 4 @foreach (var item in Model)5 {6 7 89 }
1 *{ 2 padding:0; 3 margin:0; 4 box-sizing:border-box; 5 } 6 html,body{ 7 width:100%; 8 height:100%; 9 font-size:14px;10 background-color:whitesmoke;11 }12 body{13 display:flex; 14 flex-direction:column;15 align-items:stretch;16 }17 /*列表的高度必须固定，且overflow-y必须为auto*/18 .list{19 overflow-x:hidden;20 overflow-y:auto;21 position:relative;/*很重要，配合item的absolute*/22 padding-bottom:3rem;23 flex:1;24 }25 /*item必须是list的直接子元素*/26 .list>.item{27 width:100%;28 margin-top:1rem;29 padding:2rem;30 background-color:white;31 }32 /*加载效果，空列表效果*/33 .list > .loading,34 .list > .empty {35 display:flex;36 align-items:center;37 justify-content:center;38 /*绝对定位很重要*/39 position: absolute;40 left:0;41 right:0;42 height:3rem;43 44 }45 .list>.loading{46 /*使加载框显示再列表最下面*/47 margin-bottom:0;48 }
效果图
