1***@qq.com
1***@qq.com
  • 发布:2017-12-21 12:02
  • 更新:2017-12-21 12:02
  • 阅读:1253

页面之间自定义事件传递值导致所有按钮跟着变

分类:MUI

首先,第一个页面有多个按钮。
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的大牛们帮忙解决一下。谢谢了

2017-12-21 12:02 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复