mui()
MUI框架使用CSS选择器获取HTML元素，返回MUI对象的数组。
mui("p")：选取所有 元素
mui("p.title")：选取所有包含 .title 类的 元素
//将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);
})
//判断值是否为空
//使用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)) {
//...
}
参考文档
- MUI官方文档
| 上一章 | 下一章 |
|---|