移動端web頁面上滑加載更多功能

時間 2019-11-13

標籤移動 web 頁面加載更多功能欄目無線简体版

原文原文鏈接

背景介紹：css

開發企業微信的一個應用，實如今企業微信中調用本身程序頁面，頁面加載多模塊數據，向下滑加載更多，等等等等，一波三折html

而後很早就成功了是這樣實現的：前端

html:web

<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：異步獲取數據ajax

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

效果圖：canvas

而後第二個星期來了就不能用了，前端姐姐告訴我，她實現了一個右滑加載出半個頁面展現我的信息！ruby

這時候頁面滾動監聽時間就失效了微信

網上找緣由：app

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