Blend UI Layer API文档
2018-10-17 11:34 更新
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![](https://atts.w3cschool.cn/attachments/day_161016/201610161014415527.png)
通过该项设置要显示的页面地址
类型 | 说明 | 是否必须 |
---|---|---|
String | 要显示的页面url地址 | 是 |
实例:
var layer = new Blend.ui.Layer({
"url":"content.html"
});
id![](https://atts.w3cschool.cn/attachments/day_161016/201610161014582857.png)
layer页面id类型 | 说明 | 是否必须 |
---|---|---|
String | layer页面id,标识一个页面 | 否 |
实例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer"
});
active![](https://atts.w3cschool.cn/attachments/day_161016/201610161015116079.png)
通过该项配置是否立即激活。如果不激活的话,该页面将不会显示。类型 | 说明 | 是否必须 |
---|---|---|
Boolean | 是否立即激活,默认为false,激活时需要使用Layer的in()方法激活页面 | 否 |
实例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true
});
autoStopLoading![](https://atts.w3cschool.cn/attachments/day_161016/201610161015212824.png)
是否自动停止loading状态类型 | 说明 | 是否必须 |
---|---|---|
Boolean | 是否自动停止loading状态(默认值true,当页面加载完毕时将停止loading状态) | 否 |
实例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
"autoStopLoading":true
});
maxLoadingTime![](https://atts.w3cschool.cn/attachments/day_161016/201610161015387073.png)
当autoStopLoading设置为false时,超过定义时间将停止loading状态类型 | 说明 | 是否必须 |
---|---|---|
Number | 超时停止loading状态(默认2毫秒,单位毫秒) | 否 |
实例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
"autoStopLoading":false,
"maxLoadingTime":10
});
pullToRefresh![](https://atts.w3cschool.cn/attachments/day_161016/201610161015488142.png)
是否支持下拉刷新类型 | 说明 | 是否必须 |
---|---|---|
Boolean | 是否支持下拉刷新(默认为false,不支持下拉刷新) | 否 |
实例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
"pullToRefresh":true
});
pullText![](https://atts.w3cschool.cn/attachments/day_161016/201610161015596764.png)
下拉显示的文字类型 | 说明 | 是否必须 |
---|---|---|
String | 下拉显示的文字 | 否 |
实例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
"pullToRefresh":true,
"pullText":"下拉可以刷新⊙0⊙"
});
loadingText![](https://atts.w3cschool.cn/attachments/day_161016/201610161021199526.png)
加载中的文字类型 | 说明 | 是否必须 |
---|---|---|
String | 加载中的文字 | 否 |
实例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
"autoStopLoading":true,
"pullText":"下拉可以刷新⊙0⊙",
"loadingText":"更新中,请等待..."
});
releaseText![](https://atts.w3cschool.cn/attachments/day_161016/201610161021274192.png)
提示释放的文字类型 | 说明 | 是否必须 |
---|---|---|
String | 提示释放的文字 | 否 |
实例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
"pullToRefresh":true,
"pullText":"下拉可以刷新⊙0⊙",
"loadingText":"更新中,请等待...",
"releaseText":"释放更新⊙0⊙"
});
pullIcon![](https://atts.w3cschool.cn/attachments/day_161016/201610161021454855.png)
下拉操作时需要显示的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![](https://atts.w3cschool.cn/attachments/day_161016/201610161021576741.png)
在页面加载完毕前的loading状态时,屏幕显示的Icon类型 | 说明 | 是否必须 |
---|---|---|
String | Base64编码的图片字符串(不包含数据头) | 否 |
实例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
"loadingIcon":"base64图片字符串"
});
subLayer![](https://atts.w3cschool.cn/attachments/day_161016/201610161022076852.png)
是否是子layer类型 | 说明 | 是否必须 |
---|---|---|
Boolean | 是否是子layer,默认不是 | 否 |
实例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
"subLayer":true
});
fixed![](https://atts.w3cschool.cn/attachments/day_161016/201610161022163733.png)
如果是子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![](https://atts.w3cschool.cn/attachments/day_161016/201610161022317409.png)
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![](https://atts.w3cschool.cn/attachments/day_161016/201610161022431964.png)
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 ( )![](https://atts.w3cschool.cn/attachments/day_161016/201610161023101355.png)
激活layer页面,在页面初始化配置时,如果active
属性未配置,则需要使用该方法激活要显示的页面。实例
var layer = new Blend.ui.Layer({
"url":"content.html"
});
//替换layer的url
layer.replace("http://www.baidu.com");
layer.in();
out ( )![](https://atts.w3cschool.cn/attachments/day_161016/201610161023235855.png)
当前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)![](https://atts.w3cschool.cn/attachments/day_161016/201610161023324167.png)
重载页面参数 | 类型 | 说明 | 是否必须 |
---|---|---|---|
url | String | 重载页面时所用的url | 是 |
实例
var layer = new Blend.ui.Layer({
"url":"content.html",
"active":true
});
layer.reload("http://www.baidu.com");
replace (url)![](https://atts.w3cschool.cn/attachments/day_161016/201610161023556102.png)
页面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![](https://atts.w3cschool.cn/attachments/day_161016/201610161024409914.png)
获取layer页面的url属性实例
var layer = new Blend.ui.Layer({
"url":"content.html"
});
console.log(layer.getUrl());
canGoBack ( ) : Boolean![](https://atts.w3cschool.cn/attachments/day_161016/201610161024493641.png)
layer是否可以回退,是否有历史记录实例
var layer = new Blend.ui.Layer({
"url":"content.html",
"active":true
});
if(layer.canGoBack()){
//可以回退后操作
Blend.ui.layerBack();
}
clearHistory ( ) ![](https://atts.w3cschool.cn/attachments/day_161016/201610161025251915.png)
清空页面历史记录实例
var layer = new Blend.ui.Layer({
"url":"content.html",
"active":true
});
layer.clearHistory();
isActive ( ) : Boolean![](https://atts.w3cschool.cn/attachments/day_161016/201610161025424214.png)
layer是否是激活状态实例
var layer = new Blend.ui.Layer({
"url":"content.html",
"active":true
});
//页面激活状态,以下为true
console.log(layer.isActive());
destroy ( )![](https://atts.w3cschool.cn/attachments/day_161016/201610161025556259.png)
销毁layer实例
var layer = new Blend.ui.Layer({
"url":"content.html"
});
layer.destroy();
setLayout( )![](https://atts.w3cschool.cn/attachments/day_161016/201610161026154294.png)
如果是子layer,此可以设置layer的大小和位置实例
var layer = new Blend.ui.Layer({
"url":"content.html"
});
layer.setLayout({
left: 30,
top: 180,
width: 250,
height: 200,
});
以上内容是否对您有帮助:
更多建议: