Blend 下拉刷新

概述

用戶可以在頁面上自定義下拉刷新樣式和定義下拉操作，方便用戶刷新獲取頁面內(nèi)容。

下拉刷新簡單使用

在BlendUI中我們既可以在Layer頁面內(nèi)也可以在LayerGroup頁面內(nèi)使用下拉刷新功能。

Layer頁面內(nèi)下拉刷新操作

代碼主要格式如下：

document.addEventListener("blendready", function() {
    Blend.ui.layerInit("contentLayerId",function(dom){
        Blend.ui.on("layerPullDown",function(event){
            Blend.ui.layerStopRefresh();
        });
    });

    Blend.ui.layerInit("0", function(dom) {
        var contentLayer = new Blend.ui.Layer({
            "id": "contentLayerId",
            "url": "content.html",
            "pullToRefresh": true
        });
    });
});

一個簡單的實(shí)例：

document.addEventListener("blendready", function() {
    Blend.ui.layerInit("0", function(dom) {
        var contentLayer = new Blend.ui.Layer({
            "id": "contentLayerId",
            "url": "content.html",
            "pullToRefresh": true
        });
    });
});

溫馨提示：這里定義的Layer需要設(shè)置pullToRefresh為true才可以顯示下拉刷新效果，但目前只是在頁面上增加了效果，具體刷新操作如何配置請向下看。

加入下拉事件響應(yīng)

document.addEventListener("blendready", function() {
    Blend.ui.layerInit("contentLayerId",function(dom){
        Blend.ui.on("layerPullDown",function(event){
            //監(jiān)聽下拉事件，自定義刷新操作
            setTimeout(function(){
                $("#content", dom).prepend("刷新操作");
                //一定要在操作結(jié)束后停止頁面刷新
                Blend.ui.layerStopRefresh();
            },1000);
        });
    });

    Blend.ui.layerInit("0", function(dom) {
        var contentLayer = new Blend.ui.Layer({
            "id": "contentLayerId",
            "url": "content.html",
            "pullToRefresh": true
        });
    });
});

溫馨提示：這里的刷新操作通過setTimeout模擬了一個耗時1秒的請求操作，請求結(jié)束后需要用戶手動結(jié)束頁面刷新操作。

自定義下拉樣式

配置下拉文本樣式，默認(rèn)為"下拉刷新"

pullText:"下拉可以刷新⊙０⊙"

loadingText:"更新中，請等待..."

releaseText:"釋放更新⊙０⊙"

loadingIcon:"base64圖片字符串，不包含頭"

一個實(shí)例：

document.addEventListener("blendready", function() {
    Blend.ui.layerInit("0", function(dom) {
        var contentLayer = new Blend.ui.Layer({
            "id": "contentLayerId",
            "url": "content.html",
            "active": true,
            "pullToRefresh": true,
            "pullText": "下拉可以刷新⊙０⊙",
            "loadingText": "更新中，請等待...",
            "releaseText": "釋放更新⊙０⊙",
            "loadingIcon": "base64圖片字符串，不包含頭"
        });
    });

    Blend.ui.layerInit("contentLayerId",function(dom){
        Blend.ui.on("layerPullDown",function(event){
            setTimeout(function(){
                $("#content", dom).prepend("刷新操作");
                Blend.ui.layerStopRefresh();
            },1000);
        });
    });
});

LayerGroup頁面內(nèi)下拉刷新操作

代碼主要格式如下：

document.addEventListener("blendready", function () {
    Blend.ui.layerInit("content", function (dom) {
        Blend.ui.on("layerPullDown", function (event) {
            setTimeout(function () {
                $("#page-content", dom).prepend("刷新操作");
                Blend.ui.layerStopRefresh();
            }, 2000);
        });
    });
    Blend.ui.layerInit("0", function (dom) {
        var tabs = new Blend.ui.LayerGroup({
            id: "tab",
            layers: [
                {
                    "id": 'content',
                    "url": 'content.html',
                    "active": true,
                    "autoload": true,
                    "pullToRefresh": true,
                    "pullBgColor": "ff0000",
                    "pullText": "下拉刷新",
                    "loadingText": "更新中...",
                    "releaseText": "釋放更新"
                },{
                    id: 'first',
                    "url": 'first.html',
                    "autoload": true
                }
            ]
        });
    });
});

LayerGroup與Layer頁面下刷新操作基本一致，具體參數(shù)配置和使用方法見上面講解。

示例源碼

在線獲取Layer下拉刷新源碼

在線獲取LayerGroup下拉刷新源碼