iscroll5实现上拉加载更多，下拉刷新

本篇介绍的是html中使用iscroll实现上拉加载更多，下拉刷新数据。

前言
在一次开发微信公众号的项目中，我需要添加上拉加载更多数据，下拉刷新。当时还没有做过这样的功能。请教同事和上网搜索之后，发现iscroll可以实现我们需要的功能。

iscroll5下载链接：http://cubiq.org/iscroll-5

---

效果

• 上拉加载更多

  
  
  

  iscroll1.png
  
  
  

  iscroll2.png

• 下拉刷新

  
  
  

  iscroll3.png
  
  
  

  iscroll4.png

• 尖头和加载图标

  
  
  

  [email protected]

实现步骤

• 引入js/iscroll.js和js/iscroll-probe.js文件。
• js初始化IScroll，添加监听，并实现获取监听之后触发的方法。
• 实现上拉加载方法和下拉刷新方法。

具体实现代码

• 在html文件中，引入js和css。
  iscroll.css文件:

/*iscroll css*/

#wrapper {
    position: absolute;
    z-index: -1;
    bottom: 0px;     /* 底部无控件  */
    left: 0;
    width: 100%;
    overflow: hidden;
}

#scroller {
    top: -40px;             /* 隐藏下啦显示条  下啦显示条div高度为40px  */
    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;
}

#pullDown,#pullUp {
    height:40px;
    line-height:40px;
    font-weight:bold;
    font-size:14px;
}

#pullDown {
    /*top: -20px;*/
}

#pullDown .pullDownIcon, #pullUp .pullUpIcon  {
    display:block; float:left;
    width:40px; height:40px;
    background:url(../[email protected]) 0 0 no-repeat;
    -webkit-background-size:40px 80px; background-size:40px 80px;
    -webkit-transition-property:-webkit-transform;
    -webkit-transition-duration:250ms;
}
#pullDown .pullDownIcon {
    -webkit-transform:rotate(0deg) translateZ(0);
}
#pullUp .pullUpIcon  {
    -webkit-transform:rotate(-180deg) translateZ(0);
}

#pullDown.flip .pullDownIcon {
    -webkit-transform:rotate(-180deg) translateZ(0);
}

#pullUp.flip .pullUpIcon {
    -webkit-transform:rotate(0deg) translateZ(0);
}

#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
    background-position:0 100%;
    -webkit-transform:rotate(0deg) translateZ(0);
    -webkit-transition-duration:0ms;

    -webkit-animation-name:loading;
    -webkit-animation-duration:2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
}
.pullUpIcon{text-align:center;width:40px;margin:0 auto;display:block;margin-left:38%;}
.pullDownIcon{text-align:center;width:40px;margin:0 auto;display:block;margin-left:38%;}

    
    
    
    

    



    
数据列表



    

        

            下拉刷新...
        
        

            

                标题
            
            

                标题
            
            

                标题
            
        
        

            上拉刷新...
        
    

注：iscroll.js和iscroll-probe.js的顺序不要反了，要不然可能会出现scroll监听事件不触发的情况。

• 添加scroll监听，并实现监听方法。
  iscroll-custom.js文件

/*iscroll-custom js*/


var isLoadUpdate = false;
var myScroll,pullDownEl, pullDownOffset,
    pullUpEl, pullUpOffset,pageSize=2;
var isTouch = false;          // 手是否触摸屏幕
var isMoreLoading = false;          // 正在加载更多数据中
var isUpdateLoading = false;     // 正在更新数据中


function loaded() {

    pullDownEl = document.getElementById('pullDown');
    pullDownOffset = pullDownEl.offsetHeight + 15;
    pullUpEl = document.getElementById('pullUp');
    pullUpOffset = pullUpEl.offsetHeight + 15;

    myScroll = new IScroll('#wrapper', {
        preventDefault:false,   // 是否屏蔽默认事件
        probeType: 3,
        mouseWheel: true,   // 是否监听鼠标滚轮事件
        scrollbars: true,    //是否显示默认滚动条
        fadeScrollbars: true,   //是否渐隐滚动条，关掉可以加速
        disableTouch: false
    });
    myScroll.on('scroll',positionJudge);  
}

function positionJudge(){
    if(this.y>pullDownOffset && !isUpdateLoading)  //判断下拉
    {
        pullDownEl.className = 'flip';
        pullDownEl.querySelector('.pullDownLabel').innerHTML = '松开开始更新...';
        if(!isTouch)     //  松开执行
        {
            isUpdateLoading = true;
            pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
            pullDownEl.className = 'loading';
            updateData();
        }
    }
    else if (this.y0)
    {
        pullDownEl.className = '';
        pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
    }
    else if(this.y<(this.maxScrollY-pullUpOffset) && !isMoreLoading)
    {
        pullUpEl.className = 'flip';
        pullUpEl.querySelector('.pullUpLabel').innerHTML = '松开加载更多...';
        if(!isTouch)        //  松开执行
        {
            isMoreLoading = true;
            pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
            pullUpEl.className = 'loading';
            moreData();
        }
    }
    else if(this.y>(this.maxScrollY-pullUpOffset) && !isMoreLoading && isTouch && this.y<0)
    {
        pullUpEl.className = '';
        pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉刷新...';
    }

}

document.getElementById("wrapper").addEventListener('touchend', function (e) {isTouch = false;}, false);
document.getElementById("wrapper").addEventListener('touchstart', function (e) {isTouch = true;}, false);
document.getElementById("wrapper").addEventListener('touchmove', function (e) {e.preventDefault();}, false);

function updateData() {
    isLoadUpdate = true;
    getData();
}

function moreData(){
    isLoadUpdate = false;
    getData();
}

function defaultStatu(type) {
    if(type == "more")  //more
    {
        isMoreLoading = false;
        pullUpEl.className = '';
        pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉刷新...';
    }
    else if(type == "update")               //update
    {
        isUpdateLoading = false;
        pullDownEl.className = '';
        pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
    }
}

iscroll5参数说明：http://blog.csdn.net/sweetsuzyhyf/article/details/44195549/

以上基本完成了上拉下拉功能，但是这里有个不足，就是数据不足一页的时候，scroll无法上下滑动，只有当里面的内容大于一页的时候，才有滑动效果。我们可以在js中把内容的最小高度设置为屏幕高度减去wrapper距离顶部的距离，然后把scroller的高度设置为内容高度加1。

$(document).ready(function(){
    initScrollerHeight();
});

function initScrollerHeight() {
    var bodyHeight = $(window).height();
    var ulTop = $('#wrapper').offset().top;
    var height = bodyHeight - ulTop;
    $('#contentView').css('min-height', height);

    //  设置最小
    var scrollerCustomHeight = $('#contentView').height() + 1;
    var scrollerHeightPX = scrollerCustomHeight + "px";
    $('#scroller').css('height', scrollerHeightPX);
}

本篇小结：
1、引入js。
2、初始化scroll，并设置属性。
3、添加监听，并实现监听方法。
4、实现下拉上拉方法。