上拉刷新，下拉加载更多。。。仿原生的效果----iscroll是一款做滚动效果的插件，具体介绍我就不废话，看官方文档，我只写下我项目开发的一些用到的用法：

(如果不好使，调试你的css，想必是个很蛋疼的问题，给点提示 ：#wrapper，以及#scroller-content要注意）

html如下：

     
        
      
            
       
                
        
                    
                             
         下拉刷新                
        
                
        
                               //你写的内容在这里                
        
                
        
                    
                             
         上拉加载                
        
            
       
        
      
    
     

css如下：

/* =================iscroll================================= */#wrapper {
       position: absolute;    z-index: 1;    top: 210*@size;    bottom: 0px;    left: 0;    width: 100%;    overflow: hidden;}#scroller {
       position: absolute;    z-index: 1;    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);    width: 100%;    -webkit-transform: translateZ(0);    -moz-transform: translateZ(0);    -ms-transform: translateZ(0);    -o-transform: translateZ(0);    transform: translateZ(0);    -webkit-touch-callout: none;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;    -webkit-text-size-adjust: none;    -moz-text-size-adjust: none;    -ms-text-size-adjust: none;    -o-text-size-adjust: none;    text-size-adjust: none;}#scroller-pullDown,#scroller-pullUp {
       background: #333333;    height: 50px;    line-height: 50px;    border-bottom: 1px solid #ccc;    font-weight: bold;    font-size: 14px;    color: #888;    text-align: center;    position: absolute;    left: 0px;    width: 100%;}#scroller-pullDown {
       top: -50px;}#scroller-pullUp {
       bottom: -50px;}.pull-up-msg,.pull-down-msg {
       padding-left: 5px;    position: relative;    top: 0px;}#scroller-pullDown .pull-down-icon,#scroller-pullUp .pull-up-icon {
       display: inline-block;    color: #e84c3d;    font-size: 16px;}

js代码看这里：

function pushData(m) {        var m = m || 10;        if (flag) {
             //发送Ajax,循环自己的数据加载：           $.myGET(uri, {formData}, function (data) {            if (data.result) {                for (var i = 0; i < data.package.length; i++) {                     data.package[i].isPass ? data.package[i].isPass = "pass" : data.package[i].isPass = "unpass";                    temp = '
' + '' + data.package[i].planName + '' + '' + '2017.03.08' + '' + '' + data.package[i].score + '' + '' + '
';                   $("#target").append(temp);                }                if (m * n > data.total) {                    $("#pullUp-msg").text("已无更多数据");                    flag = false;                    return false;                }            }          }    (function(window) {        var myScroll,            upIcon = $("#up-icon"),            downIcon = $("#down-icon"),            target = $("#target"),            temp = " ";        myScroll = new IScroll('#wrapper', {            probeType: 3,            mouseWheel: true        });        myScroll.on("scroll", function() {            var y = this.y,                maxY = this.maxScrollY - y,                downHasClass = downIcon.hasClass("reverse_icon"),                upHasClass = upIcon.hasClass("reverse_icon");            if (y >= 40) {                !downHasClass && downIcon.addClass("reverse_icon");                return "";            } else if (y < 40 && y > 0) {                downHasClass && downIcon.removeClass("reverse_icon");                return "";            }            if (maxY >= 40) {                !upHasClass && upIcon.addClass("reverse_icon");                return "";            } else if (maxY < 40 && maxY >= 0) {                upHasClass && upIcon.removeClass("reverse_icon");                return "";            }        });        //下拉逻辑在这里！        myScroll.on("slideDown", function() {            if (this.y > 40) {                window.location.reload();            }        });        //上拉逻辑在这里！        myScroll.on("slideUp", function() {            if (this.maxScrollY - this.y > 40) {                pushData();                myScroll.refresh();            }        });    })(window)