閱讀(2.7k) 書簽贊(0) 我要糾錯

Blend 頁面切換

2018-10-17 11:32 更新

概述

在應(yīng)用中很多開發(fā)者都會用到頁面切換操作，BlendUI提供了相關(guān)頁面切換接口供開發(fā)者使用。

Blend 頁面切換

示例

out方法

out方法針對的是Layer對象，可以實現(xiàn)退出該對象的頁面并返回到上一個頁面效果。一個實例：

document.addEventListener("blendready", function () {
    Blend.ui.layerInit("0", function (dom) {
        $('#jump', dom).click(function (e) {
            new Blend.ui.Layer({
                "id": "contentLayerId",
                "url": "content.html",
                "active": true,
                "duration": 200
            });
        });
    });

    Blend.ui.layerInit("contentLayerId", function (dom) {
        $('#nav-back', dom).click(function (e) {
            Blend.ui.get('contentLayerId').out();
        });
    });
});

(1) 在主頁index.html上添加一個Button，定義一個頁面創(chuàng)建事件，事件中通過Layer方法實現(xiàn)了content.html頁面初始化并跳轉(zhuǎn)。部分代碼如下：

document.addEventListener("blendready", function () {
    Blend.ui.layerInit("0", function (dom) {
        $('#jump', dom).click(function (e) {
            new Blend.ui.Layer({
                "id": "contentLayerId",
                "url": "content.html",
                "active": true,
                "duration": 200
            });
        });
    });
});

代碼中使用Blend.ui.layerInit方法定義了index.html頁面初始化后的操作，layerInit第一個參數(shù)代表頁面的id(默認(rèn)首頁id為“0”)。

(2) 在content.html頁面上添加回退按鈕id:nav-back，當(dāng)觸發(fā)回退操作時，使用Blend.ui中get方法找到Layer實例，鏈?zhǔn)秸{(diào)用out方法實現(xiàn)頁面回退操作。部分代碼如下：

document.addEventListener("blendready", function () {
    Blend.ui.layerInit("0", function (dom) {
        $('#jump', dom).click(function (e) {
            new Blend.ui.Layer({
                "id": "contentLayerId",
                "url": "content.html",
                "active": true,
                "duration": 200
            });
        });
    });

    Blend.ui.layerInit("contentLayerId", function (dom) {
        $('#nav-back', dom).click(function (e) {
            Blend.ui.get('contentLayerId').out();
        });
    });
});

代碼中同樣使用layerInit方法對id為contentLayerId的content.html頁面進(jìn)行了回退按鈕綁定操作，定義了觸發(fā)back回退事件，使用Layer.out()方法實現(xiàn)頁面回退操作。

destroy方法

回退效果與out()方法效果相同，但是頁面回退的同時將會對當(dāng)前頁面實例進(jìn)行銷毀操作，下次頁面跳轉(zhuǎn)時頁面需要再次創(chuàng)建頁面實例?；菊{(diào)用方式同out()，此處不再多余解釋，部分代碼如下：

document.addEventListener("blendready", function () {
    Blend.ui.layerInit("0", function (dom) {
        $('#jump', dom).click(function (e) {
            new Blend.ui.Layer({
                "id": "contentLayerId",
                "url": "content.html",
                "active": true,
                "duration": 200
            });
        });
    });

    Blend.ui.layerInit("contentLayerId", function (dom) {
        $('#nav-back', dom).click(function (e) {
            //僅此處與上一節(jié)的out()方法調(diào)用不同
            Blend.ui.get('contentLayerId').destroy();
        });
    });
});

layerBack方法

回退操作既可以使用Layer中的方法也可以直接使用Blend.ui中的方法。layerBack()方法可以實現(xiàn)根據(jù)頁面id進(jìn)行頁面回退控制。部分代碼如下：

document.addEventListener("blendready", function () {
        Blend.ui.layerInit("0", function (dom) {
        $('#jump', dom).click(function (e) {
            new Blend.ui.Layer({
                "id": "contentLayerId",
                "url": "content.html",
                "active": true,
                "duration": 200
            });
        });
    });

    Blend.ui.layerInit("contentLayerId", function (dom) {
        $('#nav-back', dom).click(function (e) {
            //回退操作
            Blend.ui.layerBack();
            //Blend.ui.layerBack("退至其他頁面id");
        });
    });
});