关于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