MUI框架—其他方法

作者: 白晓明 | 来源:发表于2019-04-15 17:38 被阅读1次

MUI框架—其他方法
mui日历badge角标定位
MUI框架 — init()方法
mui.init()与mui.ready()与mui.plusR
[MUI插件]MUI搜索框及其事件调用
浅尝MUI-序
Web APP 二
MUI基本语法[01]-mui.type()
MUI框架
MUI

mui()

MUI框架使用CSS选择器获取HTML元素，返回MUI对象的数组。
mui("p")：选取所有 <p> 元素
mui("p.title")：选取所有包含 .title 类的 <p> 元素

//将mui对象转成dom对象
var obj = mui("#title")[0];

该方法更多是为了配合MUI插件使用，比如轮播图、下拉刷新、区域滚动等。

//跳转到轮播图第二张图
mui('.mui-slider').slider().gotoItem(1);
//重启上拉加载
mui('#pullup-container').pullRefresh().refresh(true);

each()
each既是类方法，也是对象方法。换而言之，你可以使用 mui.each() 方法遍历数组或JSON对象，也可以使用 mui(selector).each() 方法去遍历DOM结构。

//输出当前数组中每个元素的平方
var array = [1,2,3];
mui.each(array,function(index,item){//index表示当前元素的下标或key，item表示当前匹配元素
  console.log(item*item);
}) 

//判断值是否为空
<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：需合并的目标对象
//object1：需合并的对象
//objectN：需合并的对象
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));

//extend(deep, target, object1[, objectN]) 深度合并
//deep：若为true，则递归合并
//target：需合并的目标对象
//object1：需合并的对象
//objectN：需合并的对象
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：delay毫秒后要执行的函数
//delay：延迟毫秒数
//context：上下文
mui.later(function(){
      console.log("延迟1000ms后打印！")
},1000)

scrollTo()
滚动窗口屏幕到指定位置，该方法是对 window.scrollTo() 方法在手机端的增强实现。

//scrollTo(ypos[, duration][, handler])
//ypos：要在窗口文档显示区左上角显示文档的y坐标
//duration：滚动时间周期，单位为毫秒
//handler：滚动结束后执行的回调函数
mui.scrollTo(0,1000);//1秒钟滚动到页面顶部

os
我们经常会通过navigator.userAgent 判断当前允许环境的需求，只需要使用 mui.os.xxx 调用即可。

//plus：返回是否在H5+ APP允许
//stream：返回是否为流应用

//android：返回是否为安卓手机
//version：安卓版本号
//isBadAndroid：android非Chrome环境

//iso：返回是否为苹果设备
//version：返回手机版本号
//iphone：返回是否为苹果手机
//ipad：返回是否为ipad

//wechat：返回是否在微信中运行

//检测是否为IOS或安卓系统版本是否小于4.4
if(mui.os.ios || (mui.os.android && parseFloat(mui.os.version)<4.4)) {
    //...
}