Layer API文档

Construct

配置所需参数来构建一个Layer。

Layer的配置格式如下:

var layer = new Blend.ui.Layer({"xxx":"xxx"});// 传入创建Layer的参数键值对,具体参见以下文档
另一种格式如下:
var Layer = Blend.ui.Layer;
var layer = new Layer({"xxx":"xxx"});

开发者可自行选定使用格式,以下统一以第一种格式展示代码

Layer包含以下配置项:

url

通过该项设置要显示的页面地址

类型 说明 是否必须
String 要显示的页面url地址

实例:

var layer = new Blend.ui.Layer({
    "url":"content.html"
});

id

layer页面id

类型 说明 是否必须
String layer页面id,标识一个页面

实例:

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer"
});

active

通过该项配置是否立即激活。如果不激活的话,该页面将不会显示。

类型 说明 是否必须
Boolean 是否立即激活,默认为false,激活时需要使用Layer的in()方法激活页面

实例:

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true
});

autoStopLoading

是否自动停止loading状态

类型 说明 是否必须
Boolean 是否自动停止loading状态(默认值true,当页面加载完毕时将停止loading状态)

实例:

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,
    "autoStopLoading":true
});

maxLoadingTime

当autoStopLoading设置为false时,超过定义时间将停止loading状态
类型 说明 是否必须
Number 超时停止loading状态(默认2毫秒,单位毫秒)

实例:

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,
    "autoStopLoading":false,
    "maxLoadingTime":10
});

pullToRefresh

是否支持下拉刷新

类型 说明 是否必须
Boolean 是否支持下拉刷新(默认为false,不支持下拉刷新)

实例:

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,

    "pullToRefresh":true
});

pullText

下拉显示的文字

类型 说明 是否必须
String 下拉显示的文字

实例:

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,

    "pullToRefresh":true,
    "pullText":"下拉可以刷新⊙0⊙"
});

loadingText

加载中的文字

类型 说明 是否必须
String 加载中的文字

实例:

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,
    "autoStopLoading":true,

    "pullText":"下拉可以刷新⊙0⊙",
    "loadingText":"更新中,请等待..."
});

releaseText

提示释放的文字

类型 说明 是否必须
String 提示释放的文字

实例:

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,

    "pullToRefresh":true,
    "pullText":"下拉可以刷新⊙0⊙",
    "loadingText":"更新中,请等待...",
    "releaseText":"释放更新⊙0⊙"
});

pullIcon

下拉操作时需要显示的Icon

类型 说明 是否必须
String Base64编码的图片字符串(不包含数据头)

实例:

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,

    "pullToRefresh":true,
    "pullText":"下拉可以刷新⊙0⊙",
    "loadingText":"更新中,请等待...",
    "releaseText":"释放更新⊙0⊙",
    "pullIcon":"base64图片字符串"
});

loadingIcon

在页面加载完毕前的loading状态时,屏幕显示的Icon

类型 说明 是否必须
String Base64编码的图片字符串(不包含数据头)

实例:

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,

    "loadingIcon":"base64图片字符串"
});

subLayer

是否是子layer

类型 说明 是否必须
Boolean 是否是子layer,默认不是

实例:


var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,
    "subLayer":true
});

fixed

如果是子layer,用fixed说明是否需要固定在页面上

类型 说明 是否必须
Boolean 如果subLayer==true, 是否fiexd到附属layer上面,默认false

实例:


var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,
    "subLayer":true,
    "fixed":true,
});

fx

layer打开显示时的动画类型slide|fade|pop

类型 说明 是否必须
Boolean layer打开显示时的动画类型slide|fade|pop,默认是slide

实例:


var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,
    'fx': 'pop',
});

duration

layer打开显示时的动画时长

类型 说明 是否必须
Boolean [normal|quick|slow|number], 动画持续时间可以是字符串或者指的数值,默认为normal

实例:


var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,
    'fx': 'pop',
    "duration":"quick"
});

Method

in ( )

激活layer页面,在页面初始化配置时,如果active属性未配置,则需要使用该方法激活要显示的页面。

实例

var layer = new Blend.ui.Layer({
    "url":"content.html"
});

//替换layer的url
layer.replace("http://www.baidu.com");
layer.in();

out ( )

当前layer退场,返回上一个Layer

实例

var layerA = new Blend.ui.Layer({
    "url":"contentA.html",
    "active":true
});
var layerB = new Blend.ui.Layer({
    "url":"contentB.html",
    "active":true
});

//layerB退场,返回上一个layerA
layerB.out();

reload (url)

重载页面

参数 类型 说明 是否必须
url String 重载页面时所用的url

实例

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "active":true
});

layer.reload("http://www.baidu.com");

replace (url)

页面url替换

参数 类型 说明 是否必须
url String 页面替换的url

实例

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "active":true
});

layer.replace("http://www.baidu.com");
//可以利用in()方法,激活页面
layer.in();

getUrl ( ) : String

获取layer页面的url属性

实例

var layer = new Blend.ui.Layer({
    "url":"content.html"
});

console.log(layer.getUrl());

canGoBack ( ) : Boolean

layer是否可以回退,是否有历史记录

实例

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "active":true
});

if(layer.canGoBack()){
    //可以回退后操作
    Blend.ui.layerBack();
}

clearHistory ( )

清空页面历史记录

实例

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "active":true
});

layer.clearHistory();

isActive ( ) : Boolean

layer是否是激活状态

实例

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "active":true
});

//页面激活状态,以下为true
console.log(layer.isActive());

destroy ( )

销毁layer

实例

var layer = new Blend.ui.Layer({
    "url":"content.html"
});

layer.destroy();

setLayout( )

如果是子layer,此可以设置layer的大小和位置

实例

var layer = new Blend.ui.Layer({
    "url":"content.html"
});

layer.setLayout({
    left: 30,
    top: 180,
    width: 250,
    height: 200,
});