mui.picker和mui的$.back()冲突解决
最近有需要用到mui的选择器插件,初步完成后被告知多次点击选择框后无法返回上一页面,如图:
排查原因结果是picker选择器重复调用:
// 生成时间选择器
function renderDateSelect(){
var myDate = new Date();
//获取当前年
var year=myDate.getFullYear();
//获取当前月
var month=myDate.getMonth()+1;
//获取当前日
var date=myDate.getDate();
var dtPicker = new mui.DtPicker({
type:"date",
beginDate:new Date(year-6,month-1,date),
endDate:myDate
});
$("#dateSelect").on("touchstart",function(){
dtPicker.show(function(selectItems){
$("#dateSelect").val(selectItems.text);
})
});
}
因每点击一次按钮,dtPicker.show()执行一次,所以造成选择器的重复加载,解决方法如下:
$("#dateSelect").on("touchstart",function(){
if($(".mui-dtpicker").hasClass("mui-active")){
return false;
}else{
dtPicker.show(function(selectItems){
$("#dateSelect").val(selectItems.text);
})
}
});
因mui.picker选择器的展示与隐藏是通过添加mui-active类名来实现的,如图:
因此当选择器存在mui-active类名时,即$(".mui-dtpicker").hasClass(“mui-active”),阻止其弹出时间,避免重复调用。