基于iscroll5的下拉刷新和上拉加载的实现原理

第一步：下载iscroll5官方js文件，使用其中的iscroll-prob.js

第二步：打开iscroll5-prob.js 在iscroll中修改几处的代码

1.function IScroll (el, options)｛｝里加两个属性this.minScrollX     = 0;this.minScrollY     = 0;［如图1］

2.在iscroll的prototype定义的方法resetPosition里修改一处代码

if ( !this.hasHorizontalScroll || this.x > 0 ) {    x = this.minScrollX;//todo  ----------0修改而成} else if ( this.x < this.maxScrollX ) {    x = this.maxScrollX-this.minScrollX; //todo 修改了-this.minScrollX}if ( !this.hasVerticalScroll || this.y > 0 ) {    y = this.minScrollY;//todo ----------0修改而成} else if ( this.y < this.maxScrollY ) {    y = this.maxScrollY-this.minScrollY;//todo 修改了-this.minScrollY}，如图2。

这里修改就时为了 页面控制minScrollY 让iscroll重置位置的时候会留一段距离。

3.在iscroll的prototype定义的方法热refresh方法里修改一处代码 重置那两个属性值为0，this.minScrollX     = 0;this.minScrollY     = 0;如图3.

第三步：页面部分。可以参考官方demo

html：

<div class="wrapper">    <div class="scroller">        <div id="downTag" style="height: 50px;width:100%;background-color: #f3f3f3;position: absolute;z-index: -1;top: -50px;text-align: center; line-height: 50px;">下拉</div>        <ul>            <li>Pretty row 1</li>            <li>Pretty row 2</li>            <li>Pretty row 3</li>            <li>Pretty row 4</li>            <li>Pretty row 5</li>            <li>Pretty row 7</li>            <li>Pretty row 8</li>            <li>Pretty row 9</li>            <li>Pretty row 10</li>            <li>Pretty row 10</li>            <li>Pretty row 10</li>            <li>Pretty row 10</li>            <li>Pretty row 10</li>            <li>Pretty row 10</li>            <li>Pretty row 10</li>            <li>Pretty row 10</li>            <li>Pretty row 10</li>            <li>Pretty row 10</li>            <li>Pretty row 10</li>            <li>Pretty row 10</li>            <li>Pretty row 10</li>            <li>Pretty row 10</li>            <li>Pretty row 10</li>            <li>Pretty row 10</li>            <li>Pretty row 10</li>        </ul>        <div id="upTag" style="height: 50px;width:100%;background-color: #f3f3f3;position: absolute;z-index: -1;bottom: -50px;text-align: center; line-height: 50px;">上拉</div>    </div></div>

加了两个div作为下啦 上拉的显示标签，样式丑陋可以自己改。

css部分：参考官方demo

<style type="text/css">    body {        overflow: hidden; /* this is important to prevent the whole page to bounce */        margin: 0;        padding: 0;    }    .wrapper {        position: absolute;        z-index: 1;        top: 45px;        bottom: 0;        left: 0;        width: 100%;        overflow: hidden;        background-color: #f3f3f3;    }    .scroller {        position: relative;        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;        min-height: 100%;        background-color: #fff;    }    ul,li{        margin: 0;        padding: 0;        list-style: none;    }    .wrapper{        border:1px solid grey;    }    .scroller{        border:1px solid grey;    }    li{        height: 20px;        border-bottom: 1px solid gainsboro;        padding: 5px 0;        text-align: center;    }</style>

加了些border 看的清楚。。。

scroller 加了min-height:100%和图三里面那个修改＝的一起 便于不满一屏时也可拉动

最后 js部分：

都加了注释：

<script type="text/javascript">var myScroll;function loaded () {    var option = {        pull_up : true, //是否显示上拉        pull_down : true,//是否显示下拉        is_loading : false,//是否正在加载 即上拉后正在加载        is_refresh : false,//是否正在下拉刷新        pull_distance : 50,//拉动距离 即达到出发加载或刷新的临界值        pull_element_height : 50,//上拉 下拉显示标签的高度  也是iscroll回弹后定位的高度        pull_up_element:document.querySelector('#upTag'),//上拉标签        pull_down_element:document.querySelector('#downTag')//下拉标签    };    //上拉下拉几个临界点的显示效果    var loading_style = { // 变化的文字或者效果        refresh_before : function(){            //没有刷新没有加载情况下 才变化            if(!option.is_loading && !option.is_refresh)option.pull_down_element.innerText = '下拉刷新';        },        refresh_able : function(){            //没有刷新没有加载情况下 才变化            if(!option.is_loading && !option.is_refresh)option.pull_down_element.innerText = '松手开始刷新';        },        refresh_start : function(){            document.getElementById('downTag').innerText = '正在刷新...';            //正在刷新的时候隐藏上拉加载            if(option.pull_up)option.pull_up_element.style.display = 'none';        },        refresh_end : function(){            document.getElementById('downTag').innerText = '刷新完成';            //刷新完成 显示上拉加载            if(option.pull_up)option.pull_up_element.style.display = '';        },        load_before : function(){            //没有刷新没有加载情况下 才变化            if(!option.is_loading && !option.is_refresh)option.pull_up_element.innerText = '上拉加载更多';        },        load_able : function(){            //没有刷新没有加载情况下 才变化            if(!option.is_loading && !option.is_refresh)option.pull_up_element.innerText = '松手开始加载';        },        load_start : function(){            document.getElementById('upTag').innerText = '正在加载...';            //正在加载的时候 隐藏下拉刷新            if(option.pull_down)option.pull_down_element.style.display = 'none';        },        load_end : function(){            option.pull_up_element.innerText = '加载完成';            //加载完成了 显示下拉刷新            if(option.pull_down)option.pull_down_element.style.display = '';        }    };    //根据设置 隐藏上拉下拉标签    if(!option.pull_up)option.pull_up_element.style.display = 'none';    if(!option.pull_down)option.pull_down_element.style.display = 'none';    //实例化iscroll    myScroll = new IScroll('.wrapper', {probeType:2});    //滑动事件处理    myScroll.on('scroll',function(){        //计算拉动的距离 处理为正数是下拉 负数是上拉        var absY = this.maxScrollY-this.y;        this.moved_distance = this.y>0?this.y:(absY>0?-absY:0);        //回弹距离0 默认是到初始位置        this.minScrollY = 0;        switch (true){            //大于0 为下拉刷新 :0 - 刷新的临界值            case this.moved_distance>0&&this.moved_distance<option.pull_distance:                loading_style.refresh_before();                break;            //大于0 为下拉刷新 :刷新的临界值以上 出发刷新            case this.moved_distance>option.pull_distance:                loading_style.refresh_able();                //启用下拉刷新 并且不是上拉加载正在加载的情况下才控制回弹高度                if(option.pull_down && !option.is_loading)this.minScrollY=option.pull_element_height;                break;            //小于0 上拉加载: 0 - 负数 的刷新临界值            case this.moved_distance<0&&this.moved_distance>-option.pull_distance:                loading_style.load_before();                break;            //小于0 上拉加载: 负数 的刷新临界值以下 触发加载            case this.moved_distance<-option.pull_distance:                loading_style.load_able();                //启用的上拉加载 并且不是正在刷新 才控制回弹高度                if(option.pull_up && !option.is_refresh)this.minScrollY=option.pull_element_height;                break;        }    });    //滑动结束的处理    myScroll.on('scrollEnd',function(e){        //没有正则刷新且没有正在加载 才触发 刷新和加载的处理        if( !option.is_loading && !option.is_refresh){            //判断临界值            if(this.moved_distance > option.pull_distance){                loading_style.refresh_start();                option.is_refresh = true;                //用一个计时器模拟了加载数据时间                var t1 = setTimeout(function(){                    clearTimeout(t1);                    loading_style.refresh_end();                    t1 =  setTimeout(function(){                        clearTimeout(t1);                        myScroll.refresh();                        option.is_refresh = false;                    },500);                },20000);            }            if(this.moved_distance < -option.pull_distance){                loading_style.load_start();                option.is_loading = true;                //用一个计时器模拟了加载数据时间                var t2 = setTimeout(function(){                    clearTimeout(t2);                    loading_style.load_end();                    t2 = setTimeout(function(){                        clearTimeout(t2);                        option.is_loading = false;                        myScroll.refresh();                    },500);                },20000);            }        }    });}document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);</script>

加载的效果可以根据自己需要变更