使用iScroll实现上拉或者下拉刷新

上拉或者下拉刷新的需求在移动端是非常常见的需求，大部分情况下，实现这个效果都使用网上现有的解决方案，例如有人使用swiper这个插件，也有人使用iScroll这个滚动插件。本文的示例是利用iscroll实现的下拉刷新效果。

iScroll简介

iScrool是目前最成熟的自定义滚动解决方案之一，在移动端和PC有很好的兼容性。iScroll官方提供了5个不同的版本：

iscroll.js 通用版包含了大部分公共特性
iscroll-lite.js 缩减版削减了一些功能特性，例如：滚动条，鼠标滚轮等等
iscroll-probe.js 探索版此版本可以满足你获取滚动条位置的需求。
iscroll-zoom.js 滚动缩放版
iscroll-infinite.js 无限制版

根据不同的需求，选择相应的版本，当前的示例中，我们选择的是iscroll-probe.js版。
Gitbook地址：iScroll API 中文版

详细使用

代码思路则是：利用监听滚动条的scroll事件，判断下拉或者上拉的距离，做上触发距离标记，当scrollEnd事件触发时，执行数据加载。让我们看核心部分代码：

HTML代码结构

<div id="MyScroller" class="main">

    <div class="warpper">

        <div id="PullDown" class="scroller-pullDown" style="display: none;">

            <img style="width: 20px; height: 20px;" src="rolling.svg" />

            <span id="pullDown-msg" class="pull-down-msg">下拉刷新</span>

        </div>

        <ul id="Content" class="dropdown-list">

        </ul>

        <div id="PullUp" class="scroller-pullUp" style="display: none;">

            <img style="width: 20px; height: 20px;" src="rolling.svg" />

            <span id="pullUp-msg" class="pull-up-msg">上拉刷新</span>

        </div>

    </div>

</div>

CSS样式

.scroller {

    position: relative;

    width: 100%;

    height: 100%;

}

.scroller .warpper {

    position: absolute;

    width: 100%;

}

.scroller-pullDown, .scroller-pullUp {

    width: 100%;

    height: 30px;

    padding: 10px 0;

    text-align: center;

}

.dropdown-list {

    padding: 0;

    margin: 0;

}

.dropdown-list li {

    width: 100%;

    background: #ddd;

    line-height: 45px;

    text-align: center;

    color: #FFF;

    border-bottom: 1px solid #FFF;

}

javascript

var pullDown = document.querySelector("#PullDown"),

    pullUp = document.querySelector("#PullUp"),

    isPulled = false; // 拉动标记

var myScroll = new IScroll('#MyScroller', {

    probeType: 3,

    mouseWheel: true,

    scrollbars: true,

    preventDefault: false,

    fadeScrollbars: true

});

myScroll.on('scroll', function() {

    var height = this.y,

        bottomHeight = this.maxScrollY - height;

    // 控制下拉显示

    if (height >= 60) {

        pullDown.style.display = "block";

        isPulled = true;

        return;

    }

    else if (height < 60 && height >= 0) {

        pullDown.style.display = "none";

        return;

    }

    // 控制上拉显示

    if (bottomHeight >= 60) {

        pullUp.style.display = "block";

        isPulled = true;

        return;

    }

    else if (bottomHeight < 60 && bottomHeight >= 0) {

        pullUp.style.display = "none";

        return;

    }

})

myScroll.on('scrollEnd', function() { // 滚动结束

    if (isPulled) { // 如果达到触发条件，则执行加载

        isPulled = false;

        appendContent(getContents());

        myScroll.refresh();

    }

});

完整的demo请看:

http://wewoor.github.io/js-lab/iscroll-pulldown-load/index.html

原文地址：

http://imziv.com/blog/article/read.htm?id=73

秒客网