最近使用mui框架

mui框架官网
使用mui框架子页面
只需要在mui.init方法里
子页面是绝对定位

subpages:[{
            url:'list.html',//子页面HTML地址，支持本地地址和网络地址
            id:'list',//子页面标志
            styles:{
                top:'100px',//距离页面顶部位置
                bottom:'10px'//距离页面底部位置
            },
        }]

mui 子页面比父页面等级要高,如果父页面有弹出菜单等等,会被子页面遮挡.
我的解决方法是将弹出框新写一个页面
如:
父页面:

openPopover.addEventListener("tap",function(){//元素添加点击方法
            $.openWindow('menu.html', 'menu');//打开某个页面(url,id)
        })
//新建webview命名menu.html,设置背景可见
floatw = plus.webview.create("menu.html", "menu", {//设置页面的样式
            background: "transparent",//背景透明
            zindex: 10,//显示等级,由于都是子页面,设置等级显示有效
        })

子页面引用一个全面的灰色图片作为背景蒙版,
将弹出菜单写成div 背景白色,进行绝对定位
装做自己有一个弹出框

(function($,doc,owner){//形参

}(mui,document,window))//实参

时间弹出框

<script src="js/mui.picker.min.js"></script> //需要引用这两个文件
<link href="../css/mui.picker.min.css" rel="stylesheet" />

function pickerDate (){
                    var _self=document.getElementById("spanDate");
                    var currentDate=new Date();
                    var id = _self.getAttribute('id');
                    var nextDate=new Date();
                    nextDate.setFullYear(currentDate.getFullYear()+1);
                    nextDate.setDate(31);
                    nextDate.setMonth(11);
                    nextDate.setHours(23);
                    nextDate.setMinutes(59);
                    //给时间组件设置时间样式
                    _self.picker = new mui.DtPicker({
                        type:"date",
                        beginDate: currentDate,//设置开始日期
                        endDate: nextDate//设置结束日期 
//                      customData:{ //这里可以设置年月日小时分钟秒的数值,自定义
//                          i:[ //这里是分钟的定义为显示00,点击后的数值00
//                              {
//                                  text:"00",
//                                  value:"00"
//                              },
//                              {
//                                  text:"30",
//                                  value:"30"
//                              }
//                          ]
//                      }

                    });
                    _self.picker.show(function(rs) {
                        plus.webview.currentWebview().hide();//这里是关闭子页面
                        mui.toast("您选择的日期是:"+rs.text);
                        //获取当前页码对象
                        var parentWin =plus.webview.currentWebview();
                        //获取打开当前窗口的对象
                        var hh=parentWin.opener();
            //调用父页面方法 传入参数 hh 父页面对象"pickerDate"方法名称,后面为参数
                        mui.fire(hh,"pickerDate",
                        {
                            dateText:rs.text
                        });
                        _self.picker.dispose();//释放组件资源
                        * 通常情况下，不需要释放组件资源，初始化之后，可以一直使用。
                        * 当内容较多，如不释放组件资源，在某些设备上可能会卡顿。
                        * 所以每次用完便立即调用 dispose() 进行释放,下次用时再创建新实例。
                        _self.picker = null;
                    });
                }

上拉刷新,下拉加载:
只需要在mui.init方法里配置

pullRefresh : {
            container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
            down : {
                callback : dropDownData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
            },
            up : {
                auto: true,//可选,默认false.首次加载自动上拉刷新一次
                contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                callback: pullUpData
            }
        }

上拉刷新或者下拉加载都需要写
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true or false);
这个表示是否没有资源可以加载 true 没有,false 还有资源
如果没有资源则会禁止下拉或上拉动作 并显示contentnomore 该配置的内容

打开新的页面的时候,ios可能会获取不到页面对象
可以使用先预加载页面的形式

mui.preload({
    url: '../listApply/listApply.html',
    id: 'listApply'
    });

var examie= plus.webview.getWebviewById('listApply');//根据页面id获取页面对象
    $.fire(examie,"apparatusInit",//mui自定义方法
        {
             status:0
        });
    plus.webview.show(examie); // 显示窗口