配置所需參數(shù)來構(gòu)建一個Layer。
Layer的配置格式如下:
var layer = new Blend.ui.Layer({"xxx":"xxx"});// 傳入創(chuàng)建Layer的參數(shù)鍵值對,具體參見以下文檔
另一種格式如下:
var Layer = Blend.ui.Layer;
var layer = new Layer({"xxx":"xxx"});
開發(fā)者可自行選定使用格式,以下統(tǒng)一以第一種格式展示代碼
Layer包含以下配置項:
通過該項設(shè)置要顯示的頁面地址
類型 | 說明 | 是否必須 |
---|---|---|
String | 要顯示的頁面url地址 | 是 |
實例:
var layer = new Blend.ui.Layer({
"url":"content.html"
});
類型 | 說明 | 是否必須 |
---|---|---|
String | layer頁面id,標(biāo)識一個頁面 | 否 |
實例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer"
});
類型 | 說明 | 是否必須 |
---|---|---|
Boolean | 是否立即激活,默認(rèn)為false,激活時需要使用Layer的in()方法激活頁面 | 否 |
實例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true
});
類型 | 說明 | 是否必須 |
---|---|---|
Boolean | 是否自動停止loading狀態(tài)(默認(rèn)值true,當(dāng)頁面加載完畢時將停止loading狀態(tài)) | 否 |
實例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
"autoStopLoading":true
});
類型 | 說明 | 是否必須 |
---|---|---|
Number | 超時停止loading狀態(tài)(默認(rèn)2毫秒,單位毫秒) | 否 |
實例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
"autoStopLoading":false,
"maxLoadingTime":10
});
類型 | 說明 | 是否必須 |
---|---|---|
Boolean | 是否支持下拉刷新(默認(rèn)為false,不支持下拉刷新) | 否 |
實例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
"pullToRefresh":true
});
類型 | 說明 | 是否必須 |
---|---|---|
String | 下拉顯示的文字 | 否 |
實例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
"pullToRefresh":true,
"pullText":"下拉可以刷新⊙0⊙"
});
類型 | 說明 | 是否必須 |
---|---|---|
String | 加載中的文字 | 否 |
實例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
"autoStopLoading":true,
"pullText":"下拉可以刷新⊙0⊙",
"loadingText":"更新中,請等待..."
});
類型 | 說明 | 是否必須 |
---|---|---|
String | 提示釋放的文字 | 否 |
實例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
"pullToRefresh":true,
"pullText":"下拉可以刷新⊙0⊙",
"loadingText":"更新中,請等待...",
"releaseText":"釋放更新⊙0⊙"
});
類型 | 說明 | 是否必須 |
---|---|---|
String | Base64編碼的圖片字符串(不包含數(shù)據(jù)頭) | 否 |
實例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
"pullToRefresh":true,
"pullText":"下拉可以刷新⊙0⊙",
"loadingText":"更新中,請等待...",
"releaseText":"釋放更新⊙0⊙",
"pullIcon":"base64圖片字符串"
});
類型 | 說明 | 是否必須 |
---|---|---|
String | Base64編碼的圖片字符串(不包含數(shù)據(jù)頭) | 否 |
實例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
"loadingIcon":"base64圖片字符串"
});
類型 | 說明 | 是否必須 |
---|---|---|
Boolean | 是否是子layer,默認(rèn)不是 | 否 |
實例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
"subLayer":true
});
類型 | 說明 | 是否必須 |
---|---|---|
Boolean | 如果subLayer==true, 是否fiexd到附屬layer上面,默認(rèn)false | 否 |
實例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
"subLayer":true,
"fixed":true,
});
類型 | 說明 | 是否必須 |
---|---|---|
Boolean | layer打開顯示時的動畫類型slide|fade|pop,默認(rèn)是slide | 否 |
實例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
'fx': 'pop',
});
類型 | 說明 | 是否必須 |
---|---|---|
Boolean | [normal|quick|slow|number], 動畫持續(xù)時間可以是字符串或者指的數(shù)值,默認(rèn)為normal | 否 |
實例:
var layer = new Blend.ui.Layer({
"url":"content.html",
"id":"contentLayer",
"active":true,
'fx': 'pop',
"duration":"quick"
});
active
屬性未配置,則需要使用該方法激活要顯示的頁面。實例
var layer = new Blend.ui.Layer({
"url":"content.html"
});
//替換layer的url
layer.replace("http://www.baidu.com");
layer.in();
實例
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();
參數(shù) | 類型 | 說明 | 是否必須 |
---|---|---|---|
url | String | 重載頁面時所用的url | 是 |
實例
var layer = new Blend.ui.Layer({
"url":"content.html",
"active":true
});
layer.reload("http://www.baidu.com");
參數(shù) | 類型 | 說明 | 是否必須 |
---|---|---|---|
url | String | 頁面替換的url | 是 |
實例
var layer = new Blend.ui.Layer({
"url":"content.html",
"active":true
});
layer.replace("http://www.baidu.com");
//可以利用in()方法,激活頁面
layer.in();
實例
var layer = new Blend.ui.Layer({
"url":"content.html"
});
console.log(layer.getUrl());
實例
var layer = new Blend.ui.Layer({
"url":"content.html",
"active":true
});
if(layer.canGoBack()){
//可以回退后操作
Blend.ui.layerBack();
}
實例
var layer = new Blend.ui.Layer({
"url":"content.html",
"active":true
});
layer.clearHistory();
實例
var layer = new Blend.ui.Layer({
"url":"content.html",
"active":true
});
//頁面激活狀態(tài),以下為true
console.log(layer.isActive());
實例
var layer = new Blend.ui.Layer({
"url":"content.html"
});
layer.destroy();
實例
var layer = new Blend.ui.Layer({
"url":"content.html"
});
layer.setLayout({
left: 30,
top: 180,
width: 250,
height: 200,
});
更多建議: