m***@sina.com
m***@sina.com
  • 发布:2018-06-06 10:51
  • 更新:2018-12-18 08:59
  • 阅读:7335

解决同时使用MUI下拉刷新、mui-PopPicker、mui-popover相互冲突的问题

分类:MUI

分享一下我在开发应用时,遇到的一些问题的解决方法,不知道会不会给大家一些帮助。
如果您有更好的方法,也可以一起讨论。

在我开发的应用中,主要涉及到高级查询的操作,因为有更多的查询选项,我使用了mui-popover这个控件可进行弹出,然后,嵌入了一些查询表单和下拉列表的选择项。

下拉列表选择项,使用了mui-poppicker控件。在测试时,popover和poppicker控件在安卓上遮罩层会有问题,点击poppicker后,相互遮挡,并且页面上还启用了Mui的下拉刷新控件。

出现的问题:
1、在弹出poppicker选择下拉列表时,会触发下拉刷新的事件。
2、popover显示后,再触发poppicker后,遮罩层不能完全遮盖住popover,导致可以多次触发poppicker

解决方法:

解决问题1思路:
弹出poppicker选择下拉列表时,禁用下拉刷新功能,选择确定后再启用下拉刷新功能。

解决问题2思路:
popover显示后,如果触发poppicker控件,先隐藏popover,选择确定后再显示popover控件。

另外,为了创建下拉列表方便,我将poppicker控件封装了一个常用方法,可以直接调用。

以下是实现的代码:

var isActivePop; //POP刷新激活状态,解决下拉刷新冲突  
mui.plusReady(function() {  
	isActivePop = false;  
	mui("#popWindow .mui-scroll-wrapper").scroll();  
	mui("body").on("shown", ".mui-popover", function(e) {  
		plus.webview.currentWebview().setPullToRefresh({  
			support: false  
		}, function() {});  
		isActivePop = true;  
	});  
	mui("body").on("hidden", ".mui-popover", function(e) {  
		if(isActivePop) {  
			plus.webview.currentWebview().setPullToRefresh({  
				support: true  
			}, function() {  
				// downRefresh(); 你自己的逻辑,我这里用的隐含刷新  
			});  
			mui("#refreshName").pullRefresh().pulldownLoading(); // 调用下拉刷新  
		}  
		isActivePop = false;  
	});  
}  
  
// 下拉刷新  
function downRefresh() {  
	// 自己的逻辑处理  
}  
  
/**  
 * 获取选择列表 (返回值为表单input赋值)  
 * 使用时需要引用 mui.picker.all.js 和 mui.picker.all.css 文件  
 * @param {String} buttonId 触发及显示文本的id  
 * @param {String} dataId 数据表单value的id  
 * @param {JSONArray} data 格式为 [{ value: 'ywj', text: '董事长 叶XX' }]  
 * @param {String} selectedValue 为选中值 value  
 * @param {Function} _callbackBefore 确认前回调方法  
 * @param {Function} _callbackPull 确认后回调下拉方法  
 * @param {Function} _callbackExe 确认后执行回调方法  
 */  
function getSelect(buttonId, dataId, data, selectedValue, _callbackBefore, _callbackPull, _callbackExe) {  
	var userPicker = new mui.PopPicker();  
	userPicker.setData(data);  
	var resultText = document.getElementById(buttonId);  
	var resultValue = document.getElementById(dataId);  
	var mui_popover = mui(".mui-popover"); //获取页面上多个popover控件  
	//设置默认值  
	if(selectedValue != null && selectedValue != "") {  
		userPicker.pickers[0].setSelectedValue(selectedValue); //设置选中值value  
		resultText.value = userPicker.pickers[0].getSelectedText(); //获取当前取中值的文本text  
		resultValue.value = userPicker.pickers[0].getSelectedValue(); //获取当前取中值的value值给数据表单  
	}  
	resultText.removeEventListener('tap', function(event) {});  
	resultText.addEventListener('tap', function(event, selectedValue) {  
		var _isActivePop = (isActivePop == null)? false : isActivePop);  
		if(_isActivePop) {  
			isActivePop = false; //在隐藏前,关闭刷新状态  
			for(var i = 0; i < mui_popover.length; i++) {  
				mui(mui_popover[i]).popover("hide");  
			}  
		}  
		plus.webview.currentWebview().setPullToRefresh({  
			support: false,  
		}, function() {  
			if(_callbackBefore != null) _callbackBefore();  
		});  
		userPicker.show(function(items) {  
			resultValue.value = items[0].value;  
			resultText.value = items[0].text;  
			if(_isActivePop) {  
				for(var i = 0; i < mui_popover.length; i++) {  
					mui(mui_popover[i]).popover("show"); //处理页面上多个popover  
				}  
				isActivePop = true; //在显示后,开启刷新状态,为了能在POP正常HIDE后激活下拉刷新  
			}  
			plus.webview.currentWebview().setPullToRefresh({  
				support: true  
			}, function() {  
				if(_callbackPull != null) _callbackPull();  
			});  
			if(_callbackExe != null) _callbackExe();  
		});  
	}, false);  
	return userPicker;  
}

第一次写,也自己记录一下方便以后查。
以上是我实现的一些解决办法,可能不是很好,JS水平也有限,大家可以一起来完善、提高,相互学习。

1 关注 分享
j***@163.com

要回复文章请先登录注册

5***@qq.com

5***@qq.com

回复 快乐的小蝌蚪 :
对啊,这个怎么破?
2018-12-18 08:59
守护

守护

mui("body").on("shown", ".mui-popover", function(e) 有这个shown事件吗?
2018-08-28 23:54
守护

守护

回复 q***@163.com :
mui(‘body‘).on(‘shown‘, ‘.mui-popover‘, function(e) {} 有这个shown事件吗?
2018-08-28 23:44
q***@163.com

q***@163.com

回复 快乐的小蝌蚪 :
mui(‘body‘).on(‘shown‘, ‘.mui-popover‘, function(e) {
  mui(‘#pullrefresh‘).pullRefresh().setStopped(true);
});
mui(‘body‘).on(‘hidden‘, ‘.mui-popover‘, function(e) {
  mui(‘#pullrefresh‘).pullRefresh().setStopped(false);
});
2018-07-24 19:15
m***@sina.com

m***@sina.com (作者)

回复 快乐的小蝌蚪 :
mui("body").on("hidden", ".mui-popover", function(e) {}
可以在这个里调用刷新页面的方法
2018-07-10 00:49
快乐的小蝌蚪

快乐的小蝌蚪

如果没确定,而是点的取消,或点的空白处,怎么启动下拉刷新
2018-07-05 14:09