关于mui 时间插件 dtpicker 与下拉刷新冲突问题

关于mui 时间插件 dtpicker 与下拉刷新冲突问题

mui 的部分写法会导致插件与插件之间产生冲突，小猿最近发现很多这样的问题，其中一个是mui 的时间插件与下拉刷新冲突。话不多说，先看时间插件常见的初始方法：

var chooseDate = function() {
    var result = mui('#result')[0];
    var btns = mui('.mui-btn');
    btns.each(function(i, btn) {
        btn.addEventListener('tap', function() {
            var _self = this;
            if(_self.picker) {
                _self.picker.show(function(rs) {
                    result.value = rs.text;
                    _self.picker.dispose();
                    _self.picker = null;
                });
            } else {
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                var id = this.getAttribute('id');
                _self.picker = new mui.DtPicker(options);
                _self.picker.show(function(rs) {
                    result.value = rs.text;
                    _self.picker.dispose();
                    _self.picker = null;
                });
            }
        }, false);
    });
}var chooseDate = function() {
    var result = mui('#result')[0];
    var btns = mui('.mui-btn');
    btns.each(function(i, btn) {
        btn.addEventListener('tap', function() {
            var _self = this;
            if(_self.picker) {
                _self.picker.show(function(rs) {
                    result.value = rs.text;
                    _self.picker.dispose();
                    _self.picker = null;
                });
            } else {
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                var id = this.getAttribute('id');
                _self.picker = new mui.DtPicker(options);
                _self.picker.show(function(rs) {
                    result.value = rs.text;
                    _self.picker.dispose();
                    _self.picker = null;
                });
            }
        }, false);
    });
}

最开始想到的是监听picker的弹出可隐藏，但是隐藏好像监听不到，最后想到picker的有个隐藏方法，然后重写一下这个方法，在重写的方法里面对下拉刷新做对应操作，代码如下：

var chooseDate = function() {
    var result = mui('#result')[0];
    var btns = mui('.mui-btn');
    btns.each(function(i, btn) {
        btn.addEventListener('tap', function() {
            mui('#pullrefresh').pullRefresh().setStopped(true); //暂时禁止滚动
            var _self = this;
            if(_self.picker) {
                _self.picker.show(function(rs) {
                    result.value = rs.text;
                    _self.picker.dispose();
                    _self.picker = null;
                });
            } else {
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                var id = this.getAttribute('id');
                _self.picker = new mui.DtPicker(options);
                _self.picker.show(function(rs) {
                    result.value = rs.text;
                    _self.picker.dispose();
                    _self.picker = null;
                });
            }
            _self.picker.hide = function() {
                //在选择器开启的时候会禁止页面滚动，隐藏的时候解开
                mui('#pullrefresh').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
                }
            }
        }, false);
    });
}

转载地址：https://www.cnblogs.com/guagua-19/articles/9244668.html