DCloud-MUI：utils

ylbtech-DCloud-MUI：utils

 

1.返回頂部

一、init

mui框架將不少功能配置都集中在mui.init方法中，要使用某項功能，只須要在mui.init方法中完成對應參數配置便可，目前支持在mui.init方法中配置的功能包括：建立子頁面、關閉頁面、手勢事件配置、預加載、下拉刷新、上拉加載、設置系統狀態欄背景顏色。

mui須要在頁面加載時初始化不少基礎控件,如監聽返回鍵,所以務必在每一個頁面中調用

如下各配置模塊在其對應文檔中有詳細闡述,請點擊連接查看,這裏只列出全部可配置項

mui.init({
//子頁面
    subpages: [{
        //...
    }],
//預加載
     preloadPages:[
        //...
      ],
//下拉刷新、上拉加載
     pullRefresh : {
       //...
         },
//手勢配置
      gestureConfig:{
       //...
    },
//側滑關閉
    swipeBack:true, //Boolean(默認false)啓用右滑關閉功能
    
//監聽Android手機的back、menu按鍵
    keyEventBind: {
        backbutton: false,  //Boolean(默認true)關閉back按鍵監聽
        menubutton: false   //Boolean(默認true)關閉menu按鍵監聽
    },
//處理窗口關閉前的業務
    beforeback: function() {
        //... //窗口關閉前處理其餘業務詳情點擊 ↑ "關閉頁面"連接查看
    },
//設置狀態欄顏色
    statusBarBackground: '#9defbcg', //設置狀態欄顏色,僅iOS可用
    preloadLimit:5//預加載窗口數量限制(一旦超出,先進先出)默認不限制
})
        

以上各配置模塊在其對應文檔中有詳細闡述,請點擊連接查看,如下只補充單獨配置項

經過statusBarBackground:rgb 屬性設置狀態欄顏色（iOS7.0+、安卓不支持）格式爲#RRGGBB。

mui.init({
    statusBarBackground: '#9defbcg',
})

mui默認會監聽Android手機的物理按鍵(back&menu),若不但願自動處理按鍵可經過如下方式關閉

mui.init({
    //監聽Android手機的back、menu按鍵
    keyEventBind: {
        backbutton: true,  //Boolean(默認true)關閉back按鍵監聽
        menubutton: true   //Boolean(默認true)關閉menu按鍵監聽
    },
})

二、mui

mui使用css選擇器獲取HTML元素，返回mui對象數組。
mui("p")：選取全部<p>元素
mui("p.title")：選取全部包含.title類的<p>元素

若要將mui對象轉化成dom對象，可以使用以下方法（相似jquery對象轉成dom對象）：

//obj1是mui對象
var obj1 = mui("#title");
//obj2是dom對象
var obj2 = obj1[0]; 

MUI框架的定位是「最接近原生體驗的移動App的UI框架」， 所以和jQuery有所區別，不多爲簡化DOM操做而封裝API，具體可參考MUI產品概述； 該函數的設計目的，更可能是爲了配合MUI插件使用，好比圖片輪播、下拉刷新、區域滾動等，以下爲詳細示例：

示例1：跳轉到圖片輪播的第二張圖片

mui('.mui-slider').slider().gotoItem(1);

示例2：從新開啓上拉加載

mui('#pullup-container').pullRefresh().refresh(true);

三、each()

each既是一個類方法，同時也是一個對象方法，兩個方法適用場景不一樣；換言之，你可使用 mui.each()去遍歷數組或json對象，也可使用 mui(selector).each()去遍歷DOM結構。

• mui.each( obj , handler )

  • obj
    Type: Array||JSONObj
    需遍歷的對象或數組；若爲對象，僅遍歷對象根節點下的key
  • handler
    Type: Function( Integer||String index,Anything element)
    爲每一個元素執行的回調函數；其中，index表示當前元素的下標或key，element表示當前匹配元素

• mui(selector).each( handler )

  • handler
    Type: Function( Integer index,Element element)
    爲每一個匹配元素執行的回調函數；其中，index表示當前元素在匹配元素中的位置（下標，從0開始），element表示當前匹配元素，可用 this關鍵字代替

示例1

輸出當前數組中每一個元素的平方

var array = [1,2,3]
mui.each(array,function(index,item){
  console.log(item*item);
}) 

示例2

當前頁面中有三個字段，以下：

<div class="mui-input-group">
  <div class="mui-input-row">
    <label>字段1：</label>
    <input type="text" class="mui-input-clear" id="col1" placeholder="請輸入">
  </div>
  <div class="mui-input-row">
    <label>字段2：</label>
    <input type="text" class="mui-input-clear" id="col2" placeholder="請輸入">
  </div>
  <div class="mui-input-row">
    <label>字段3：</label>
    <input type="text" class="mui-input-clear" id="col3" placeholder="請輸入">
  </div>
</div>

提交時校驗三個字段均不能爲空，若爲空則提醒並終止業務邏輯運行，使用 each()方法循環校驗，以下：

var check = true;
mui(".mui-input-group input").each(function () {
  //若當前input爲空，則alert提醒
  if(!this.value||trim(this.value)==""){
    var label = this.previousElementSibling;
    mui.alert(label.innerText+"不容許爲空");
    check = false;
    return false;
  }
});
//校驗經過，繼續執行業務邏輯
if(check){
  //.....
}

四、extend()

將兩個對象合併成一個對象。

• .extend( target , object1 [, objectN] )

  • target
    Type: Object
    需合併的目標對象
  • object1
    Type: Object
    需合併的對象
  • objectN
    Type: Object
    需合併的對象

• .extend( deep , target , object1 [, objectN] )

  • deep
    Type: Boolean
    若爲true，則遞歸合併
  • target
    Type: Object
    需合併的目標對象
  • object1
    Type: Object
    需合併的對象
  • objectN
    Type: Object
    需合併的對象

示例

var target = {
  company:"dcloud",
  product:{
    mui:"小巧、高效"
  }
} 
var obj1 = {
  city:"beijing",
  product:{
    HBuilder:"飛同樣的編碼"
  }
}
mui.extend(target,obj1);
//輸出：{"company":"dcloud","product":{"HBuilder":"飛同樣的編碼"},"city":"beijing"}
console.log(JSON.stringify(target));

 從如上輸出能夠看到，product節點下的mui被替換成了HBuilder，由於默認僅合併對象根節點下的key、value；若是想深度合併，則能夠傳入deep參數，以下：

var target = {
  company:"dcloud",
  product:{
    mui:"小巧、高效"
  }
} 
var obj1 = {
  city:"beijing",
  product:{
    HBuilder:"飛同樣的編碼"
  }
}
//支持深度合併
mui.extend(true,target,obj1);
//輸出：{"company":"dcloud","product":{"mui":"小巧、高效","HBuilder":"飛同樣的編碼"},"city":"beijing"}
console.log(JSON.stringify(target));

五、later()

setTimeOut封裝

• .later( func , delay [, context, data] )

  • func
    Type: Function
    delay毫秒後要執行的函數
  • delay
    Type: Int
    延遲的毫秒數
  • context
    Type: Object
    上下文

六、scrollTo()

滾動窗口屏幕到指定位置，該方法是對window.scrollTo()方法在手機端的加強實現，可設定滾動動畫時間及滾動結束後的回調函數;鑑於手機屏幕大小，該方法僅可實現屏幕縱向滾動。

• .scrollTo( ypos [, duration] [, handler] )

  • ypos
    Type:  Integer
    要在窗口文檔顯示區左上角顯示的文檔的 y 座標
  • duration
    Type:  Integer
    滾動時間週期，單位是毫秒
  • handler
    Type:  Function
    滾動結束後執行的回調函數

示例

1秒鐘以內滾動到頁面頂部

mui.scrollTo(0,1000);

 

七、os

咱們常常會有經過navigator.userAgent判斷當前運行環境的需求,mui對此進行了封裝,經過調用mui.os.XXX便可

• plus(能夠訪問的參數爲:)

  • .plus
    返回是否在 5+ App(包括流應用)運行
    .stream
    返回是否爲流應用

• Android(能夠訪問的參數爲:)

  • .android
    返回是否爲安卓手機
    .version
    安卓版本號
    .isBadAndroid
    android非Chrome環境

• iOS(能夠訪問的參數爲:)

  • .ios
    返回是否爲蘋果設備
    .version
    返回手機版本號
    .iphone
    返回是否爲蘋果手機
    .ipad
    返回是否爲ipad

• Wechat(能夠訪問的參數爲:)

  • .wechat
    返回是否在微信中運行

示例

檢測是否爲iOS或安卓系統版本是否小於4.4

 if(mui.os.ios||(mui.os.android&&parseFloat(mui.os.version)<4.4)){
   //...
 } 

八、

2.返回頂部

 

3.返回頂部

 

4.返回頂部

 

5.返回頂部

一、

http://dev.dcloud.net.cn/mui/util/

二、

 

6.返回頂部

 

做者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。