HTML5 AJAX 上拉加载

Posted on 2019-09-09 20:56  喜欢放心底  阅读(189)  评论(0)    收藏  举报
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="CSS/main.css">
</head>
<body>
    <header>上拉加载，下拉刷新</header>
<div id="wrapper">
    <div id="scroller">
        <ul>
            <li>王凯最帅</li>
            <li>王凯最帅</li>
            <li>王凯最帅</li>
            <li>王凯最帅</li>
            <li>王凯最帅</li>
        </ul>
        <div class="pull-loading">
            上拉加载
        </div>
    </div>
</div>
<footer>底部</footer>
</body>
<script type="text/javaScript" src="javaScript/jquery-2.2.4.min.js"></script>
<script type="text/javaScript" src="javaScript/iscroll.js"></script>
<script type="text/javaScript" src="JavaScript/main.js"></script>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

html {
  font-size: 14px;
}

header {
  height: 40px;
  width: 100%;
  min-width: 320px;
  background: #000;
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
  line-height: 40px;
}

footer {
  height: 52px;
  width: 100%;
  min-width: 320px;
  background: #000;
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
  line-height: 52px;
  position: absolute;
  bottom: 0;
}

#wrapper {
  width: 100%;
  min-width: 320px;
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 52px;
  overflow: hidden;
  z-index: 1;
  background-color: #eee;
}

.pull-loading {
  text-align: center;
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#scroller ul li {
  padding: 20px 10px;
  border-bottom: solid 1px #ccc;
  background: #fff;
}

JavaScript

var myscroll = new iScroll("wrapper", {
    onScrollMove: function () { //拉动时
        //上拉加载
        if (this.y < this.maxScrollY) {
            $(".pull-loading").html("释放加载");
            $(".pull-loading").addClass("loading");
        } else {
            $(".pull-loading").html("上拉加载");
            $(".pull-loading").removeClass("loading");
        }
    },
    onScrollEnd: function () { //拉动结束时
        //上拉加载
        if ($(".pull-loading").hasClass('loading')) {
            $(".pull-loading").html("加载中...");
            pullOnLoad();
        }
    }
});

//上拉加载函数,ajax
var num = 0;
var page = 4; //每次加载4条
function pullOnLoad() {
    setTimeout(function () {
        $.ajax({
            url: "http://localhost/%e4%b8%8b%e6%8b%89%e5%8a%a0%e8%bd%bd/source/main.json",
            type: "get",
            dataType: 'json',
            success: function (data) {
                var data_length = data.length;//数据的总长度
                var remainder = data_length % page;//余数
                if ( data_length >= (num+page)){
                    for (var j = num; j < num + page; j++){
                        var text = data[j].text;
                        $("#scroller ul").append("<li>"+ text +"</li>");
                    }
                    num+=page;
                }else if (remainder != 0 && data_length-num == remainder){
                    for (var j = num; j < num + remainder; j++){
                        var text = data[j].text;
                        $("#scroller ul").append("<li>"+ text +"</li>");
                    }
                    num+=page;
                }else{
                    $('.pull-loading').html("没有了哟");
                }
                myscroll.refresh();
            },
            error: function () {
                console.log("出错了");
            }
        });
        myscroll.refresh();
    }, 500);
}

注意引入jquery插件和iscroll插件