mui 日期选择器picker隐藏

我的需求是：在列表页，可以按照时间进行搜索，并且需要实现下拉刷新，上拉加载的效果。

我是用双webview写的。父页面是搜索条件，子页面是列表。

第一个问题，在父页面不显示日期选择器，因为子页面的层级比父页面高，子页面遮盖了弹出的选择器。搜索了一下，没有发现简单好用的解决方法，综合几个答案，最终决定在子页面写选择器，在父页面触发子页面的自定义事件，弹出选择器。（一步一步贴代码）

父页面（dealer-main.html），点击input时的事件：

var list = plus.webview.getWebviewById("dealer.html");
mui.fire(list,"showPicker",{})
list.show();

子页面（dealer.html）

window.addEventListener("showPicker",function(event){
    var params = { "type": "date"};
    var dtPicker = new mui.DtPicker(params); 
    dtPicker.show(function (res) {
      // 选择日期之后，将值返回到父页面，触发父页面的自定义事件 backPicker
        var list = plus.webview.getWebviewById("dealer-main.html");
        mui.fire(list,"backPicker",{
        type:event.detail.type,
        value:res.text
     })
    list.show();
  })
})

父页面自定义事件（backPicker）

window.addEventListener("backPicker",function(event){
        //赋值
    vm.$data.StartTime = event.detail.value;
})

这样写出现的第一个问题是父页面的选择器可以多次点击，每次都会触发子页面的showPicker事件，导致弹出一堆选择器框，自然是不行的。
我想到的解决方法是，在父页面定义一个变量n，值为数值0，每次点击input，这个数字都加1，并且作为参数传给子页面。在子页面判断如果n>=2，return，不弹出选择器，因为n大于等于2的情况就是多次点击父页面的input了，并且在父页面的backPicker事件里面重新给n赋值为0。暂且解决这个问题，但是会出现新问题，点击选择器的取消按钮，或者安卓（我暂时只用了安卓）的物理返回键，或者选择器的mask的时候，选择器隐藏掉，但是再次点击父页面的input，无法触发子页面的showPicker事件，很简单，n>=2了。然而，比较令我开心的是，我发现不管是点击选择器的取消，还是安卓的物理返回键，还是选择器的mask，其根本都是触发mui.picker.js的hide事件，那我觉得此时只能重写hide方法了。然而，在重写hide方法之前先说另外一个问题。

在子页面调出选择器的时候，年月日这些选项只能上划选择，不能下滑选择，原因也很简单，因为子页面有下拉刷新，下滑选择时间的时候，整个子页面都会下拉，这个问题我搜索了一下，真有解决方法，并且很好用。就是禁止页面刷新，结束后再重新释放。代码如下：

mui('#vmMain').pullRefresh().setStopped(true);//暂时禁止滚动
mui('#vmMain').pullRefresh().setStopped(false);//开启禁止滚动

下面说重写mui的选择器的picker的hide方法。
这是mui.picker.js的源码

hide: function() {
    var i = this;
    if(!i.disposed) {
        var n = i.ui;
        n.picker.classList.remove(e.className("active")), n.mask.close(),t.body.classList.remove(e.className("dtpicker-active-for-page")), e.back = i.__back
    }
},

需要重写的就是这部分代码，重写后的代码如下：

var params = { "type": "date"};
var dtPicker = new mui.DtPicker(params); 
//定义一个Boolean，控制选择器的弹出
var boo = true;
//重写日期选择器的hide方法 
dtPicker.hide = function(){
    boo = true;
    //隐藏选择器的时候把禁止滚动去掉
    mui('#vmMain').pullRefresh().setStopped(false);//开启禁止滚动
    var i = this;
    if(!i.disposed){
        var n=i.ui;
         n.picker.classList.remove(mui.className("active")),
         n.mask.close(),
         document.body.classList.remove(mui.className("dtpicker-active-for-page")),
         mui.back=i.__back
    }
}

下面贴稍微完整一些的代码，我会在注释里写清楚我每一步的思路：

父页面

//触发input的方法
blur(type){
    //定义的n初始值为0，每次点击input都+1；
    this.n++;
    var list = plus.webview.getWebviewById("dealer.html");
    //触发子页面的自定义事件 showPicker，
    mui.fire(list,"showPicker",{
        n:this.n//将n作为参数传过去，判断是否是第一次点击input
    })
    list.show();
},
//在子页面触发此事件 backPicker
window.addEventListener("backPicker",function(event){
    //每次返回首先将n重新赋值为0
    vm.$data.n = 0;
    //将子页面返回的时间值赋值给input框
    vm.$data.StartTime = event.detail.value;
})

子页面

//我只需要年月日，并不需要时分秒，故在此定义
var params = { "type": "date"};
//初始化时间选择器
var dtPicker = new mui.DtPicker(params); 
//定义boolean,用于判断选择器可以弹出的时间
var boo = true;
//重写日期选择器的hide方法 
 dtPicker.hide = function(){
    //将boo赋值为true，此步不用写，因为boo为true并未在其他地方改变过
    boo = true;
    //在选择器开启的时候会禁止页面滚动，隐藏的时候解开
    mui('#vmMain').pullRefresh().setStopped(false);//开启禁止滚动
    //下面这部分就是mui.picker.js的hide方法的源码了，我并没有深入分析，在此不再详解
    var i = this;
    if(!i.disposed){
        var n=i.ui;
        n.picker.classList.remove(mui.className("active")),
        n.mask.close(),
        document.body.classList.remove(mui.className("dtpicker-active-for-page")),
        mui.back=i.__back
    }
}
//自定义事件showPicker
window.addEventListener("showPicker",function(event){
    //禁止重复打开选择器  
    if(event.detail.n >= 2 && !boo)return;
    //当显示选择器之前 先将子页面禁止滚动
    mui('#vmMain').pullRefresh().setStopped(true);//暂时禁止滚动
    //当显示选择器
    dtPicker.show(function (res) {
        //点击选择器的确定按钮，首先页面设置为可以滚动  然后出发父页面的自定义事件backPicker， 将日期传过去
        mui('#vmMain').pullRefresh().setStopped(false);//开启禁止滚动
        var list = plus.webview.getWebviewById("dealer-main.html");
        mui.fire(list,"backPicker",{
            value:res.text
        })
        list.show();
    })
})

到此就结束了，可能有更简单且高效的方法吧，但我目前没查到，毕竟是渣渣，API都不熟悉
暂时还没测出问题，有问题再更新啦。
其实我还有个小需求，就是将选择器的取消按钮换成清空按钮，还在研究中......