移动端web页面上滑加载更多功能
背景介绍:
开发企业微信的一个应用,实现在企业微信中调用自己程序页面,页面加载多模块数据,向下滑加载更多,等等等等,一波三折
然后很早就成功了是这样实现的:
html:
<div id="main-info"> <div class="listclean-header"> <label class="fontsize15 fontcolor333 "> 分店:</label> <div id="selectbox" class="brancnlist"> </div> </div> <div class="listclean-body"> <ul id="cleanlist"> </ul> </div> <div class="listclean-footer"> <ul> <li class="clean" value="2">待打扫 </li> <li class="clean" value="1">已打扫 </li> </ul> </div> </div>
js:异步获取数据
ajaxdata: function (_branchid, _pageindex, _status) {//页面数据加载 var _this = this; $.ajax({ url: "AjaxListClean", type: "post", data: { BranchID: _branchid, PageIndex: _pageindex, Status: _status }, aysnc: false, success: function (res) { $(".load-mask").hide(); $(".listclean-body").css("position", "static"); $("#PageIndex").val(res.PageIndex); var _html = ""; for (var i = 0; i < res.ListCleaning.length; i++) { _html += "<li class=\"position-relative clean_" + res.ListCleaning[i].Status + "\" data-myid=\"" + res.ListCleaning[i].ID + "\">" _html += " <p class=\"branch-name\">" + res.ListCleaning[i].Branch.Name + "</p>"; _html += "<p class=\"room-number\">" + res.ListCleaning[i].Room.Name + "</p>"; _html += "<p class=\"fontsize15\">" + res.ListCleaning[i].StatusString + "</p>"; _html += "<dl><dd>" + res.ListCleaning[i].TypeIDString[0] + "</dd></dl></li>"; } $("#cleanlist").append(_html); $("#IsMore").val(res.IsMore); $("#PageIndex").val(res.PageIndex); $("#Status").val(res.Status); $("#BranchID").val(res.BranchID); if (res.PageIndex == "0") { _this.branchselectinit(res.ListBranch); //分店选择 } listclean.goconfirm(); } }); }
页面滚动的效果
getScrollTop: function () {//获取滚动条当前的位置 var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; } else if (document.body) { scrollTop = document.body.scrollTop; } return scrollTop; }, getClientHeight: function () {//获取当前可是范围的高度 var clientHeight = 0; if (document.body.clientHeight && document.documentElement.clientHeight) { clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); } else { clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); } return clientHeight; }, getScrollHeight: function () {//获取文档完整的高度 return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); } window.onscroll = function () { var _ismore = $("#IsMore").val(); if (_ismore == "0") {//判断是否有更多数据 return false; } //页面中有一个头和一个底,然后前端姐姐告诉我 //第一次加载要加一个67px,才可以 var _pageindex = $("#PageIndex").val(); var _heightconfig = 0; if (_pageindex == "0") { _heightconfig = 67; } else { _heightconfig = 0; } if (listclean.getScrollTop() + listclean.getClientHeight() + _heightconfig == listclean.getScrollHeight()) { $(".load-mask").show();//“更多”标志 $(".listclean-body").css("position", "fixed"); var _status = $("#Status").val(); var _branchid = $("#BranchID").val(); var _pageindex = $("#PageIndex").val(); //应该有一个效果 listclean.ajaxdata(_branchid, _pageindex, _status); } }
效果图:
然后第二个星期来了就不能用了,前端姐姐告诉我,她实现了一个右滑加载出半个页面展示个人信息!
这时候页面滚动监听时间就失效了
网上找原因:
1:html,body{height:100%;} 设置了100%的
2:position 和overflow 的问题;
解决方案:去掉height:100%,没啥用;
去掉了页面中最外部的div 的 postion:fixed;然后就好了!
但是,以前的计算方式是错误的,不能兼用不同手机设备!
改了一种算法:
js:
window.onscroll = function () { var clientHeight = document.documentElement.scrollTop === 0 ? document.body.clientHeight : document.documentElement.clientHeight; var scrollTop = document.documentElement.scrollTop === 0 ? document.body.scrollTop : document.documentElement.scrollTop; var scrollHeight = document.documentElement.scrollTop === 0 ? document.body.scrollHeight : document.documentElement.scrollHeight; if (clientHeight + scrollTop === scrollHeight) {//判断是否要去加载数据 $(".load-mask").show(); $(".listclean-body").css("position", "fixed"); var _status = $("#Status").val(); var _branchid = $("#BranchID").val(); var _pageindex = $("#PageIndex").val(); listclean.ajaxdata(_branchid, _pageindex, _status); } }
惊喜的发现,这是实现了类似于微信的数据加载,就是滑动到最上面加载更多数据,记下来吧,以后可能用到!
中间还去找了一个插件,可移植性比较差!
解决方案:修改js算法
js:
window.onscroll = function () { var _ismore = $("#IsMore").val();//是否有更多数据 if (_ismore == "0") { return false; } var doc = document; var win = window; //滚动到底部距离 $ScrollBottom = $(doc).height() - $(win).height() - $(win).scrollTop(); if ($ScrollBottom == 0) { $(".load-mask").show();//更多标志 var _status = $("#Status").val(); var _branchid = $("#BranchID").val(); var _pageindex = $("#PageIndex").val(); //加载数据 listclean.ajaxdata(_branchid, _pageindex, _status); } }
这里去掉了$(".listclean-body").css("position", "fixed");这行代码,因为它会导致每次加载数据之后,页面自动滚动到最顶部!
//listclean-body数据主体的div
完美实现!
最后附上加载更多标志实现方式:
html+css:
<div class="load-mask"> <div class="load-bc"> <div class="load"> </div> </div>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
@charset "utf-8"; /* CSS Document */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body { font-family: 'Lato', sans-serif; } .load-bc{width:80px;height:80px;border-radius:4px;background:Rgba(0,0,0,.8);position:absolute;top:40%;left:50%;margin-left:-40px;z-index:11} .load-mask{width:100%;height:100%;position:fixed;top:0;left:0;z-index:10} .load{ margin: 35px auto; font-size: 25px; width: 10px; height: 10px; border-radius: 50%; position: relative; text-indent: -9999em; -webkit-animation: load5 1.1s infinite ease; animation: load5 1.1s infinite ease; } @keyframes load5{ 0%{ box-shadow: 0 -20px 0 0 #ffffff, 14px -14px 0 0 rgba(255, 255, 255, 0.2), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.2), 0 20px 0 0 rgba(255, 255, 255, 0.2), -14px 14px 0 0 rgba(255, 255, 255, 0.2), -20px 0 0 0 rgba(255, 255, 255, 0.5), -14px -14px 0 0 rgba(255, 255, 255, 0.7); } 12.5%{ box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.7), 14px -14px 0 0 rgba(255, 255, 255, 1), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.2), 0 20px 0 0 rgba(255, 255, 255, 0.2), -14px 14px 0 0 rgba(255, 255, 255, 0.2), -20px 0 0 0 rgba(255, 255, 255, 0.2), -14px -14px 0 0 rgba(255, 255, 255, 0.5); } 25%{ box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.5), 14px -14px 0 0 rgba(255, 255, 255, 0.7), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.2), 0 20px 0 0 rgba(255, 255, 255, 0.2), -14px 14px 0 0 rgba(255, 255, 255, 0.2), -20px 0 0 0 rgba(255, 255, 255, 0.2), -14px -14px 0 0 rgba(255, 255, 255, 0.2); } 37.5%{ box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.2), 14px -14px 0 0 rgba(255, 255, 255, 0.5), 20px 0 0 0 rgba(255, 255, 255, 0.7), 14px 14px 0 0 rgba(255, 255, 255, 1), 0 20px 0 0 rgba(255, 255, 255, 0.2), -14px 14px 0 0 rgba(255, 255, 255, 0.2), -20px 0 0 0 rgba(255, 255, 255, 0.2), -14px -14px 0 0 rgba(255, 255, 255, 0.2); } 50%{ box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.2), 14px -14px 0 0 rgba(255, 255, 255, 0.2), 20px 0 0 0 rgba(255, 255, 255, 0.5), 14px 14px 0 0 rgba(255, 255, 255, 0.7), 0 20px 0 0 rgba(255, 255, 255, 1), -14px 14px 0 0 rgba(255, 255, 255, 0.2), -20px 0 0 0 rgba(255, 255, 255, 0.2), -14px -14px 0 0 rgba(255, 255, 255, 0.2); } 62.5%{ box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.2), 14px -14px 0 0 rgba(255, 255, 255, 0.2), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.5), 0 20px 0 0 rgba(255, 255, 255, 0.7), -14px 14px 0 0 rgba(255, 255, 255, 1), -20px 0 0 0 rgba(255, 255, 255, 0.2), -14px -14px 0 0 rgba(255, 255, 255, 0.2); } 75%{ box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.2), 14px -14px 0 0 rgba(255, 255, 255, 0.2), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.2), 0 20px 0 0 rgba(255, 255, 255, 0.5), -14px 14px 0 0 rgba(255, 255, 255, 0.7), -20px 0 0 0 rgba(255, 255, 255, 1), -14px -14px 0 0 rgba(255, 255, 255, 0.2); } 87.5%{ box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.2), 14px -14px 0 0 rgba(255, 255, 255, 0.2), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.2), 0 20px 0 0 rgba(255, 255, 255, 0.2), -14px 14px 0 0 rgba(255, 255, 255, 0.5), -20px 0 0 0 rgba(255, 255, 255, 0.7), -14px -14px 0 0 rgba(255, 255, 255, 1); } 100%{ box-shadow: 0 -20px 0 0 #ffffff, 14px -14px 0 0 rgba(255, 255, 255, 0.2), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.2), 0 20px 0 0 rgba(255, 255, 255, 0.2), -14px 14px 0 0 rgba(255, 255, 255, 0.2), -20px 0 0 0 rgba(255, 255, 255, 0.5), -14px -14px 0 0 rgba(255, 255, 255, 0.7); } }