移动端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>

@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);
    }
    
}