首先,第一个页面有多个按钮。
A页面
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="leftNav" class="mui-content">
<div><button type="button" id="btn1" class="mui-btn mui-btn-blue">btn1</button></div>
<div><button type="button" id="btn2" class="mui-btn mui-btn-blue">btn2</button></div>
<div><button type="button" id="btn3" class="mui-btn mui-btn-blue">btn3</button></div>
<div><button type="button" id="btn4" class="mui-btn mui-btn-blue">btn4</button></div>
</div>
</body>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script>
mui.init();
var apage = null;
mui.plusReady(function() {
mui.preload({
url: "indexed-list-select.html",
id: "indexed-list-select.html", //默认使用当前页面的url作为id
styles: {}, //窗口参数
extras: {
idd: "mui.preload预加载页面了"
} //自定义扩展参数
});
mui('.mui-content').on('tap', 'button', function(e) {
var a;
var id = this.getAttribute("id");
window.addEventListener('backIndexPage', function(ee) {
var a = ee.detail.str;
console.table(ee)
cc(a)
})
if(apage == null) {
apage = plus.webview.getWebviewById("indexed-list-select.html");
}
apage.show();
function cc(val) {
document.getElementById(id).innerText = val
}
})
});
</script>
</html>
B页面是使用mui的indexed-list-select.html demo页面;
里面代码有添加过一点。html不变,js部分如下:
<script type="text/javascript" charset="utf-8">
mui.init({
preloadPages:[{
id:'purchase.html',
url:'purchase.html'
}]
});
mui.ready(function() {
var header = document.querySelector('header.mui-bar');
var list = document.getElementById('list');
var done = document.getElementById('done');
//calc hieght
list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
//create
window.indexedList = new mui.IndexedList(list);
//done event
done.addEventListener('tap', function() {
var checkboxArray = [].slice.call(list.querySelectorAll('input[type="checkbox"]'));
var checkedValues = [];
checkboxArray.forEach(function(box) {
if (box.checked) {
checkedValues.push(box.parentNode.innerText);
}
});
if (checkedValues.length > 0) {
mui.alert("你选择了:" + checkedValues, "操作提示", "确定关闭", function() {
var indexPage=plus.webview.getLaunchWebview();//获取首页对象
mui.fire(indexPage,'backIndexPage',{str:checkedValues});
// console.log(checkedValues);
$('input:checkbox').attr("checked", false);
mui.back();
});
} else {
mui.alert('你没选择任何机场');
}
}, false);
mui('.mui-indexed-list-inner').on('change', 'input', function() {
var count = list.querySelectorAll('input[type="checkbox"]:checked').length;
var value = count ? "完成(" + count + ")" : "完成";
done.innerHTML = value;
if (count) {
if (done.classList.contains("mui-disabled")) {
done.classList.remove("mui-disabled");
}
} else {
if (!done.classList.contains("mui-disabled")) {
done.classList.add("mui-disabled");
}
}
});
});
</script>
最后得到的效果如下图。
问题是mui.fire接收时的监听事件导致所有按钮又重新获取一次新的值。
这个问题怎么解决?希望mui的大牛们帮忙解决一下。谢谢了