BUI 彈窗加載組件

彈窗加載組件把路由跳轉(zhuǎn)的頁面直接插入到當(dāng)前頁, 是組件的第3種表現(xiàn)形式. bui.dialog做的事情是自定義內(nèi)容提醒, bui.page做的事情除了加載模板,還執(zhí)行了模塊.

初始化

自動(dòng)加載

var uiPage = bui.page({
  url:"pages/login/login.html",
  param: {}
})

手動(dòng)加載

var uiPage = bui.page({
  url:"pages/login/login.html",
  param: {},
  autoload: false
})


$(".bui-page").click(function(){
  uiPage.open();
})

參數(shù)說明

重要的幾個(gè)參數(shù)說明下, 具體可以查看 bui.page API

• url [string] 跳轉(zhuǎn)的地址, 可以是模塊名;
• param [object] 跳轉(zhuǎn)的傳參 {};
• close [boolean] 是否需要關(guān)閉的圖標(biāo), 默認(rèn) false | true;
• autoload [boolean] 自動(dòng)執(zhí)行 默認(rèn) true | false;
• syncHistory [boolean] 是否需要同步歷史記錄, 默認(rèn) false | true (如果為true, bui.back會(huì)退到上一個(gè)頁面, false則跳過上一個(gè)頁面);
• cache [boolean] 默認(rèn) true(只執(zhí)行一次) | false(每次打開都重新執(zhí)行);
• iframe [boolean] 默認(rèn) false | true 是否以iframe 的形式打開, 適合加載遠(yuǎn)程地址;
• effect [boolean] 默認(rèn) "fadeInRight" 跟路由一樣打開, 還有一些其它效果, 請(qǐng)查看 bui.toggle API;
• beforeClose [function] 關(guān)閉前執(zhí)行回調(diào);
• closed [function] 關(guān)閉后執(zhí)行回調(diào);
• beforeOpen [function] 打開前執(zhí)行回調(diào);
• opened [function] 打開后執(zhí)行回調(diào);
• loaded [function] 第一次加載后執(zhí)行;

接收參數(shù)

在登錄頁內(nèi)部如何獲取參數(shù)呢?

bui.history.getParams

pages/login/login.js

loader.define(function(require,export,module){


  // 方法1: 如果不確定該組件會(huì)被哪種方式使用, 則可以使用這種方式獲取.
  var params = bui.history.getParams(module.id);


  // 方法2: 獲取以bui.page({url:"",param:{}}) 加載的的參數(shù), 通過以下方式獲取
  var pageParams = bui.history.getParams("page");
})

獲取彈窗加載的實(shí)例

獲取到的是加載的登錄頁 login.js 拋出來的實(shí)例.

bui.history.getPage

// 可以拿到login實(shí)例拋出的方法
var login =  bui.history.getPage("pages/login/login");
// login 等于 login.js 拋出的form對(duì)象 { init:function(){} }

pages/login/login.js

loader.define(function(require,export,module){
  var form = {
    init: function(){
      console.log("login init")
    }
  }
  // 執(zhí)行
  form.init();
  return form;
})

獲取彈窗的實(shí)例

獲取到的是外部bui.page創(chuàng)建的 dialog的實(shí)例. 等于 uiPage ;

pages/login/login.js

loader.define(function(require,export,module){
  var form = {
    init: function(){
      // 內(nèi)部可以拿到 module.id 來獲取彈窗, 進(jìn)行彈窗的操作.
      var dialog = bui.history.getPageDialog(module.id);
      // 關(guān)閉操作
          // dialog.close();


      console.log(dialog)
    }
  }
  // 執(zhí)行
  form.init();
  return form;
})