上滑web页面自动加载下一页

为什么80%的码农都做不了架构师？>>>

移动端常常是通过向上滑动到页面底部自动加载下一页内容，而不是点击“下一页”按钮进行加载。这是一个演示了自动加载下一页的小demo。

html:

<!DOCTYPE html>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta id="viewId" name="viewport" content="width=device-width,initial-scale=1,user-scalable =no">
<html>
<head>
    <link rel=stylesheet type=text/css href="demo.css">
    <script src="jquery.min.js"></script>
    <script src="demo.js"></script>
</head>
<body>
    <div id="content" class="common-greyframe">
        <a id="top"></a>
        <div>向上滑动自动加载后续页面</div>
    </div>
</body>
</html>

js:

var page_example = {
    pageNo:1,
    init:function(){
        for(var i = 0;i < 20;i++) {
            var html = '<div  class="common-items">' +
                '<div class="common-usercontent">' +
                ' 第1页  項目' + i +
                '</div>' +
                '<div class="common-previewcontent">' +
                ' 內容' + i +
                ' </div> ' +
                ' </div>';
            $("#content").append(html);
        }
    },
    loadContent:function(pageNo){
        for(var i = 0;i < 20;i++) {
            var html = '<div  class="common-items">' +
                '<div class="common-usercontent">' +
                ' 第'+pageNo+'页  項目' + i +
                '</div>' +
                '<div class="common-previewcontent">' +
                ' 內容' + i +
                ' </div> ' +
                ' </div>';
            $("#content").append(html);
        }
    }
}
$(function(){
    page_example.init();
    $(window).scroll(function(){
        var mybody = document.body;
        //FF支持document.documentElement.scrollTop，chrome支持document.body.scrollTop
        if(mybody.scrollHeight-mybody.clientHeight <= (mybody.scrollTop | document.documentElement.scrollTop)+5){
            console.log('加载下一页');
            page_example.pageNo++;
            page_example.loadContent( page_example.pageNo)
        }
    });
});

css:

html,body{
    height:100%;
}

mon-greyframe{
    background: #f0f0f0;
    padding: 0.5em;
}

mon-items{
    border: 0.1em solid #8c8b8a;
    border-radius: 0.3em;
    background: #FFFFFF;
    margin: 0.5em;
}

mon-usercontent{
    font: 0.8em sans-serif;
    color:#000000;
    padding: 0.5em 0.5em 0 0.5em;
}

mon-school,mon-previewcontent{
    font: 0.6em "sans-serif";
    color:#c4c4c4;
    padding: 0.2em 0.5em 0.5em 0.5em;
}

演示：

地址：http://sandbox.runjs/show/a3w4ayie

转载于:https://my.oschina/sencha/blog/464796

更多推荐

上滑web页面自动加载下一页