JavaScript框架（xmlplus）元件的介紹（六）下拉刷新（PullRefresh）

xmlplus 是一個JavaScript框架，用於快速開發前後端專案。這篇文章主要介紹了xmlplus組件設計系列之選項卡，具有一定的參考價值，有興趣的小伙伴們可以參考一下

“下拉刷新”由著名設計師Loren Brichter 設計，並應用於Twitter 第三方應用程式Tweetie 中。 2010年4月，Twitter 收購 Tweetie 開發商 Atebits 後，該專利歸 Twitter 所有。這一章我們就來看看如何實作一個簡單的下拉刷新元件。

目標元件分析

和前面在設計元件時的做法一樣，我們先想想看最終的成品元件是如何使用的，這需要點想像力。下拉刷新元件看成一個容器元件是合理的，使用者可以對容器的內容進行下拉操作。如果使用者完成了完整的下拉觸發操作，該元件應該會有下拉完成的事件回饋，假定這個事件名稱為 ready。根據上述的分析，我們很有可能會得到下面的一個該元件的應用範例。

Example1: {
    xml: `<PullRefresh id=&#39;example&#39;>
             <h1>Twitter</h1>
             <h2>Loren Brichter</h2>
          </PullRefresh>`,
    fun: function (sys, items, opts) {
        sys.example.on("ready", () => console.log("ready"));
    }
}

範例中的使用方式是非常簡潔的，但我們還漏了一點。如果你用過一些新聞用戶端，在某些情況下，此用戶端會自動觸發下拉刷新操作。例如，剛進入客戶端頁面或由於軟體推送機制產生的被動列表更新，這都會導致客戶端下拉刷新操作的觸發。所以如上的 PullRefresh 元件也應該提供一個觸發自動刷新的動作介面。好了，下面是加入下拉刷新介面的應用程式範例。

Example2: {
    xml: `<PullRefresh id=&#39;example&#39;>
             <h1>Twitter</h1>
             <h2>Loren Brichter</h2>
             <button id=&#39;refresh&#39;>click</button>
          </PullRefresh>`,
    fun: function (sys, items, opts) {
        sys.example.on("ready", () => console.log("ready"));
        sys.refresh.on("click", items.example.refresh);
    }
}

基本框架

現在讓我們把目光轉移到下拉刷新元件的內部，看看該如何去實作。觀察文章開始部分的大圖，很自然地我們可以將整個組件劃分為三個子組件，如下面的 XML 文件所示。

<p id="refresh">
    <Status id="status"/>
    <p id="content"></p>
</p>

週邊p 元素包含兩個子元件：其中一個是狀態指示條，用於顯示「下拉刷新」、「放開刷新」、「載入中...」以及「刷新成功」四個狀態提示，這裡暫時使用未定義的Status 元件替代；另一個p 元素用來容納下拉刷新元件的包含內容。到現在，大概可以想得出該元件的工作邏輯了，於是我們可以給出下面的一個基本的元件框架。

PullRefresh: {
    css: "#refresh { position: relative; height: 100%;...}",
    xml: `<p id="refresh">
            <Status id="status"/>
            <p id="content"/>
          </p>`,
    map: { appendTo: "content" },
    fun: function (sys, items, opts) {
        sys.content.on("touchstart", e => {
            // 侦听 touchmove 和 touchend事件
        });
        function touchmove(e) {
            // 1 处理状态条与内容内面跟随触点移动
            // 2 根据触点移动的距离显示相当的状态条内容
        }
        function touchend(e) {
            // 1 移除 touchmove 和 touchend 事件
            // 2 根据触点移动的距离决定返回原始状态或者进入刷新状态并派发事件
        }
    }
}

狀態條的實作

如前面提到的，狀態條元件包含四個狀態提示，每一刻只顯示一個狀態。狀態的切換，這裡會先用到我們下一章將講到的路由元件 ViewStack，這裡只需要了解如何使用即可。元件 ViewStack 對外只顯示子層級的一個子元件，同時偵聽一個 switch 事件，該事件的派發者攜帶了一個切換到的目標物件的名稱，也就是 ID。該元件根據這個 ID 來切換到目標視圖。下面是狀態條元件的完整實作。

Status: {
    css: "#statusbar { height: 2.5em; line-height: 2.5em; text-align: center; }",
    xml: <ViewStack id="statusbar">
            <span id="pull">下拉刷新</span>
            <span id="ready">松开刷新</span>
            <span id="loading">加载中...</span>
            <span id="success">刷新成功</span>
         </ViewStack>,
    fun: function (sys, items, opts) {
        var stat = "pull";
        function getValue() {
            return stat;
        }
        function setValue(value) {
            sys.statusbar.trigger("switch", stat = value);
        }
        return Object.defineProperty({}, "value", { get: getValue, set: setValue });
    }
}

此元件提供一個 value 介面使用者設定與取得元件的顯示狀態。父級元件可根據不同的時機呼叫該介面。

最終實作

有了上面的儲備，讓我們來填入下拉刷新元件的細節。下拉刷新過程中會涉及動畫，對於動畫目前一般有兩種選擇，可以使用 JQuery 動畫函數，也可以是 css3，這需要看各人喜好了。這裡我們選擇使用 css3 來實作。為清晰起見，下面的實作僅給出函數部分，其餘部分同上。

PullRefresh: {
    fun: function (sys, items, opts) {
        var startY, height = sys.status.height();
        sys.content.on("stouchstart", e => {
            if (items.status.value == "pull") {
                startY = e.y;
                sys.content.on("touchmove", touchmove).on("touchend", touchend);
                sys.content.css("transition", "").prev().css("transition", "");
            }
        });
        function touchmove(e) {
            var offset = e.y - startY;
            if ( offset > 0 ) {
                sys.content.css("top", offset + "px"); 
                sys.status.css("top", (offset - height) + "px");
                items.status(offset > height ? "ready" : "pull");
            }
        }
        function touchend (e) {
            var offset = e.y - startY;
            sys.content.off("touchmove").off("touchend");
            sys.content.css("transition", "all 0.3s ease-in 0s").prev().css("transition", "all 0.3s ease-in 0s");
            if ( offset < height ) {
                sys.content.css("top", "0").prev().css("top", -height + "px");
            } else {
                items.status.value = "release";
                sys.refresh.once("complete", complete);
                sys.content.css("top", height + "px").prev().css("top", "0").trigger("ready");
            }
        }
        function complete() {
            items.status.value = "message";
            setTimeout(() => {
                sys.content.css("top", "0").prev().css("top", -height + "px");
                sys.content.once("webkitTransitionEnd", e => items.status.value = "pull");
            }, 300);
        }
    }
}

對於稍微有點複雜的元件，需要注意元件的組織歸類，盡量把具有相近功能的元件放在一起。為了便於敘述，上述所列的組件示意總把它們視為同一目錄，這點讀者應該能看出來。

【相關推薦】

1. 免費js線上影片教學

2. JavaScript中文參考手冊

3. php.cn獨孤九賤（3）－JavaScript影片教學

以上是JavaScript框架（xmlplus）元件的介紹（六）下拉刷新（PullRefresh）的詳細內容。更多資訊請關注PHP中文網其他相關文章！