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/ 本文版权归做者和博客园共有，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文链接，不然保留追究法律责任的权利。