上拉加载下拉刷新

css 部分， 主要是 绝对定位 滑动区域 和 底部区域

        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 {

            margin: auto auto auto auto;
            width: 100%;
            min-width: 320px;
           position: absolute;
            left: 0;
            overflow: hidden;
            z-index: 1;
            background-color: #fff;
            height: 100%;
 
            /* 防止本机Windows上的触摸事件 */
            -ms-touch-action: none;
 
            /* 防止callout tap-hold和文本的选择 */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
 
            /* 防止文本调整取向变化对web应用程序很有用 */
            -webkit-text-size-adjust: none;
            -moz-text-size-adjust: none;
            -ms-text-size-adjust: none;
            -o-text-size-adjust: none;
            text-size-adjust: none;
            bottom: 0px;
            height: 83%;
                }
                .pull-loading {
            text-align: center;
            height: 20px;
            line-height: 20px;
            align-items: center;
            justify-content: center;
            bottom: 0%;
            z-index: 99;
            position: absolute;
            margin-left: 44%;
            color: #414141;

        }

html部分    warpper  是触发区域，  scroller 循环加载的    pull-loading 是底部

            

                      
                            

     
                     





js 部分       pullOnLoad();  这个是 ajax  上啦完成  要加载的东西


    
  var handle = 0;
  var biaozhu = '';
    var myscroll = new iScroll("wrapper", {
         vScrollbar: false,
         useTransition: true,
        
        onScrollMove: function () { //拉动时
                    if (this.y > 5 && biaozhu !='flip') {
                        biaozhu = 'flip';
                       $(".pull-loading").html("1");
                          $(".pull-loading").addClass("loading");
                       this.minScrollY = 0;
                      } else if (this.y < 5 && biaozhu =='flip') {
                          biaozhu = '';
                       $(".pull-loading").html("2");
                          $(".pull-loading").addClass("loading");                      
                      } else if (this.y < (this.maxScrollY - 5) &&  biaozhu !='flip') {
                          biaozhu = '';
                          handle = 1;
                       $(".pull-loading").html("3");
                          $(".pull-loading").addClass("loading");                      
                       this.maxScrollY = this.maxScrollY;
                      } else if (this.y > (this.maxScrollY + 5) && biaozhu =='flip') {
                          biaozhu = '';
                           handle = 2;
                       $(".pull-loading").html("4");
                          $(".pull-loading").addClass("loading");                      
                      }
        },
        onScrollEnd: function () { //拉动结束时
            if (handle == 1) {
                pullOnLoad();
           }else if(handle == 2)  {
                window.location.reload()
            }
        },
        
    }); 

接入 jq 和iscroll.js