参考

  1. MUI 使用教程 https://www.kancloud.cn/benhailong/mui/319751
  2. 官方MUI https://dev.dcloud.net.cn/mui/ui/

Ajax

https://dev.dcloud.net.cn/mui/ajax/

Utils

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

mui.each()

可以使用 mui.each() 去遍历数组或 json 对象，也可以使用 mui(selector).each() 去遍历 DOM 结构

extend()

将两个对象合并成一个对象

extend( target, object1 [, objectN])

默认仅合并对象根节点下的 key、value

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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])

深度合并

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 封装

1
2
3
4
5
mui.later( func , delay [, context, data])

//func delay 毫秒后要执行的函数
//delay 延迟的毫秒数
//context 上下文

示例

picker 选择器

  1. 引入资源

    1
    2
    3
    4
    5
    6
    7
    <!--基础mui资源-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/app/infos/css/mui.min.css">
    <script src="${pageContext.request.contextPath}/pages/app/infos/js/mui.min.js"></script>

    <!--mui picker 选择器资源-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/pages/app/infos/css/mui.picker.min.css">
    <script src="${pageContext.request.contextPath}/pages/app/infos/js/mui.picker.min.js"></script>

  2. 日期时间选择器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    //html
    <input id="departtime" type="text" placeholder="请选择出发日期"/>
    <input id="visittime" type="text" placeholder="请选择到达日期"/>

    //js
    $('#departtime, #visittime').click(function () {
                var _self = this;
                if(_self.picker) {
                    _self.picker.show(function (rs) {
                        _self.value = rs.text;
                        _self.picker.dispose();
                        _self.picker = null;
                    });
                } else {
                    _self.picker = new mui.DtPicker({});
                    _self.picker.show(function(rs) {
                        _self.value = rs.text;
                        _self.picker.dispose();
                        _self.picker = null;
                    });
                }
    });