iscroll5 上下拉动刷新

在这我不想说其他写的如何如何，虽然本人不是很会css3，但是修改倒是没问题网上说的iscroll5全改了从4升级5要改动内部代码。

我了个神，修改别人的ok的源码万一哪天又要更谁知道你改的那个。

这个iscroll5的示例包本身就不用改，就能支持上下拉动刷新只不过导入的不是基础的iscroll.js，导入的是iscroll-probe.js

我这里用的jquery是1.8 至于css什么的别关心了，只是把别人写好的拿来改改增强用户体验而已。别说什么

topOffset 这个属性没有什么的，我这就ok。

网上写的拉动刷新是由bug的，当拉动后在快速接着拉动，这时候会执行两次刷新方法和动画我这里解决了这问题

当然我试过修改isScroll.options.xxx属性想禁止滚动。等待我开启滚动。

记住导入isScroll5的js是iscroll-probe.js

var myScroll;
      var pullDownEl, pullDownL;
      var pullUpEl, pullUpL;
      var Downcount = 0 ,Upcount = 0;
      var loadingStep = 0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新
      function pullDownAction() {//下拉事件
            setTimeout(function() {
                var el, li, i;
            el = $('#add');
            for (i = 0; i < 3; i++) {
                li = $("<li></li>");
                Downcount++;
                li.text('new Add ' + Downcount + " ！");
                el.prepend(li);
            }
            pullDownEl.removeClass('loading');
            pullDownL.html('下拉显示更多...');
            pullDownEl['class'] = pullDownEl.attr('class');
            pullDownEl.attr('class','').hide();
            myScroll.refresh();
            loadingStep = 0;
        }, 1000); //1秒
      }
      function pullUpAction() {//上拉事件
        setTimeout(function() {
            var el, li, i;
            el = $('#add');
            for (i = 0; i < 3; i++) {
                li = $("<li></li>");
                Upcount++;
                li.text('new Add ' + Upcount + " ！");
                el.append(li);
            }
            pullUpEl.removeClass('loading');
            pullUpL.html('上拉显示更多...');
            pullUpEl['class'] = pullUpEl.attr('class');
            pullUpEl.attr('class','').hide();
            myScroll.refresh();
            loadingStep = 0;
        }, 1000);
      }

      function loaded() {
        pullDownEl = $('#pullDown');
        pullDownL = pullDownEl.find('.pullDownLabel');
        pullDownEl['class'] = pullDownEl.attr('class');
        pullDownEl.attr('class','').hide();

        pullUpEl = $('#pullUp');
        pullUpL = pullUpEl.find('.pullUpLabel');
        pullUpEl['class'] = pullUpEl.attr('class');
        pullUpEl.attr('class','').hide();

        myScroll = new IScroll('#content', {
            probeType: 2,//probeType：1对性能没有影响。在滚动事件被触发时，滚动轴是不是忙着做它的东西。probeType：2总执行滚动，除了势头，反弹过程中的事件。这类似于原生的onscroll事件。probeType：3发出的滚动事件与到的像素精度。注意，滚动被迫requestAnimationFrame（即：useTransition：假）。
            scrollbars: true,//有滚动条
            mouseWheel: true,//允许滑轮滚动
            fadeScrollbars: true,//滚动时显示滚动条，默认影藏，并且是淡出淡入效果
            bounce:true,//边界反弹
            interactiveScrollbars:true,//滚动条可以拖动
            shrinkScrollbars:'scale',// 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.
            click: true ,// 允许点击事件
            keyBindings:true,//允许使用按键控制
            momentum:true// 允许有惯性滑动
        });
        //滚动时
        myScroll.on('scroll', function(){
            if(loadingStep == 0 && !pullDownEl.attr('class').match('flip|loading') && !pullUpEl.attr('class').match('flip|loading')){
            if (this.y > 5) {
                //下拉刷新效果
                pullDownEl.attr('class',pullUpEl['class'])
                pullDownEl.show();
                myScroll.refresh();
                pullDownEl.addClass('flip');
                pullDownL.html('准备刷新...');
                loadingStep = 1;
            }else if (this.y < (this.maxScrollY - 5)) {
                //上拉刷新效果
                pullUpEl.attr('class',pullUpEl['class'])
                pullUpEl.show();
                myScroll.refresh();
                pullUpEl.addClass('flip');
                pullUpL.html('准备刷新...');
                loadingStep = 1;
            }
            }
        });
        //滚动完毕
        myScroll.on('scrollEnd',function(){
            if(loadingStep == 1){
            if (pullUpEl.attr('class').match('flip|loading')) {
                    pullUpEl.removeClass('flip').addClass('loading');
                pullUpL.html('Loading...');
                loadingStep = 2;
                    pullUpAction();
            }else if(pullDownEl.attr('class').match('flip|loading')){
                pullDownEl.removeClass('flip').addClass('loading');
                pullDownL.html('Loading...');
                loadingStep = 2;
                pullDownAction();
            }
            }
        });
      }


      document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

css,还是原封不动的

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    -ms-touch-action: none;
}

body,ul,li {
    padding: 0;
    margin: 0;
    border: 0;
}

body {
    font-size: 12px;
    font-family: ubuntu, helvetica, arial;
    overflow: hidden;
    /* this is important to prevent the whole page to bounce */
}

#header {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
     100%;
    height: 45px;
    line-height: 45px;
    background: #CD235C;
    padding: 0;
    color: #eee;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}

#footer {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
     100%;
    height: 48px;
    background: #444;
    padding: 0;
    border-top: 1px solid #444;
}

#content {
    position: absolute;
    z-index: 1;
    top: 45px;
    bottom: 48px;
    left: 0;
     100%;
    background: #ccc;
    overflow: hidden;
}

#scroller {
    position: absolute;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     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 ul {
    list-style: none;
    padding: 0;
    margin: 0;
     100%;
    text-align: left;
}

#scroller li {
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
    background-color: #fafafa;
    font-size: 14px;
}
#pullDown,#pullUp {
    height: 40px;
    line-height: 40px;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 14px;
    color: #888;
}

#pullDown .pullDownIcon,#pullUp .pullUpIcon {
    display: block;
    float: left;
     40px;
    height: 40px;
    background: url(img/pull-icon@2x.png) 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;
}

.-webkit-keyframes loading {
    from {
        -webkit-transform:rotate(0deg)translateZ(0);
    }

    .to {
        -webkit-transform: rotate(360deg) translateZ(0);
    }
}

html代码块

<body onload="loaded()">
    <div id="header">iScroll</div>

    <div id="content">
        <div id="scroller">
            <div id="pullDown" class="ub ub-pc c-gra">
                <div class="pullDownIcon"></div>
                <div class="pullDownLabel">下拉刷新</div>
            </div>
            <ul id="add">
                <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 6</li>
                <li>Pretty row 7</li>
                <li>Pretty row 8</li>
                <li>Pretty row 9</li>
                <li>Pretty row 10</li>
                <li>Pretty row 11</li>
                <li>Pretty row 12</li>
                <li>Pretty row 13</li>
                <li>Pretty row 14</li>
                <li>Pretty row 15</li>
                <li>Pretty row 16</li>
                <li>Pretty row 17</li>
                <li>Pretty row 18</li>
                <li>Pretty row 19</li>
                <li>Pretty row 20</li>
                <li>Pretty row 21</li>
                <li>Pretty row 22</li>
                <li>Pretty row 23</li>
                <li>Pretty row 24</li>
                <li>Pretty row 25</li>
                <li>Pretty row 26</li>
                <li>Pretty row 27</li>
                <li>Pretty row 28</li>
                <li>Pretty row 29</li>
                <li>Pretty row 30</li>
                <li>Pretty row 31</li>
                <li>Pretty row 32</li>
                <li>Pretty row 33</li>
                <li>Pretty row 34</li>
                <li>Pretty row 35</li>
                <li>Pretty row 36</li>
                <li>Pretty row 37</li>
                <li>Pretty row 38</li>
                <li>Pretty row 39</li>
                <li>Pretty row 40</li>
                <li>Pretty row 41</li>
                <li>Pretty row 42</li>
                <li>Pretty row 43</li>
                <li>Pretty row 44</li>
                <li>Pretty row 45</li>
                <li>Pretty row 46</li>
                <li>Pretty row 47</li>
                <li>Pretty row 48</li>
                <li>Pretty row 49</li>
                <li>Pretty row 50</li>
            </ul>
            <div id="pullUp" class="ub ub-pc c-gra">
                <div class="pullUpIcon"></div>
                <div class="pullUpLabel">上拉显示更多...</div>
            </div>
        </div>
    </div>

    <div id="footer"></div>

</body>