使用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

作者：Ziv小威

出處：http://imziv.com/

關于作者：專注于Java技術的程式員一枚，此外對JS開發保持着較高的興趣。愛好音樂，閱讀，FM等等。

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接。

如有問題，可以郵件：[email protected]

微網誌：Ziv小威