一个页面中同时存在侧滑导航和popover弹出菜单的问题？

Trust - 少说废话

mui-modal默认是一屏显示，也就是overflow是hidden，通过修改mui-modal类的overflow属性即可。

7***@qq.com - 1

是事件穿透还是怎么的？滚动无效加个滚动条啊

honvi (作者)

完整代码，请看附件。
1、desk.html

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>桌子</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <link rel="stylesheet" href="css/mui.min.css">  
        <link href="css/style.css" rel="stylesheet"/>  
        <link rel="stylesheet" href="css/hb_djs.css" />  
        <link rel="stylesheet" href="css/desk.css">  
        <style type="text/css">  
            .tb960x90 {  
                display: none!important;  
                display: none  
            }  
        </style>  
        <style>  
            p {  
                text-indent: 22px;  
            }  
            span.mui-icon {  
                font-size: 14px;  
                color: #007aff;  
                margin-left: -15px;  
                padding-right: 10px;  
            }  
        </style>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>  
            <a class="mui-action-back mui-icon mui-icon-left-nav  mui-pull-right" style="color:#0062CC;"></a>  
            <h1 class="mui-title" id="playerCount"></h1>  
        </header>  
        <nav class="mui-bar mui-bar-tab">  
            <button type="button" class="mui-btn mui-btn-green mui-btn-block" style="height: 50px;" id="startQz" onclick="startQz();">下一局</button>  
            <input type="text" placeholder="输入聊天文字" id="msgTxt">  
            <input type="hidden"  id="personValue">  
            <input type="hidden"  id="tableNumValue">  
            <button type="button" class="mui-btn mui-btn-blue mui-btn-block" style="height: 50px;" onClick="sendMsg();">消息发送</button>  
            <br />  
        </nav>  

        <div class="mui-content">  
            <div id="js-alert-box" class="alert-box" style="display: block;">  
                <svg class="alert-circle" width="234" height="234">  
                    <circle cx="117" cy="117" r="108" fill="#FFF" stroke="#43AEFA" stroke-width="17"></circle>  
                    <circle id="js-sec-circle" class="alert-sec-circle" cx="117" cy="117" r="108"   
                        fill="transparent" stroke="#F4F1F1" stroke-width="18" transform="rotate(-90 117 117)"></circle>  
                    <text class="alert-sec-unit" x="82" y="172" fill="#BDBDBD" id="villageValue">secs</text>  
                </svg>  
                <div id="js-sec-text" class="alert-sec-text"></div>  
                <div class="alert-body">  
                    <div id="js-alert-head" class="alert-head"></div>  
                    <div class="alert-concent">  
                        <p><button type="button" class="mui-btn mui-btn-danger mui-btn-block" id="xzBtn" onclick="xz();">下注</button></p>  
                        <p><button type="button" class="mui-btn mui-btn-danger mui-btn-block" id="qzBtn" onclick="qz();">抢庄</button></p>  
                    </div>  
                </div>   
            </div>  
            <div class="container" id="container" style="display: none;">  
                <div class="RedBox">  
                    <div class="topcontent">  
                        <!--<h2 class="bounceInDown">开抢啦！</h2>-->  
                        <span class="text flash"><b></b></span>  
                        <div class="avatar">  
                            <div id="open"><img src="images/mv.jpg" alt="" class="zoomIn" height="200" width="200"></div>  
                        </div>  
                        <div class="description1">  
                            <a class="mui-btn mui-btn-blue mui-btn-block" href="#modal" id="robBtn" style="display: none;">开</a>  
                            <!--<button type="button" class="mui-btn mui-btn-blue mui-btn-block"  id="robBtn" style="display: none;">开</button>-->  
                        </div>  
                        <div class="description2">    
                            <!--<button type="button" class="mui-btn mui-btn-red mui-btn-block" id="packetsBtn">查看记录</button>-->  
                            <a class="mui-btn mui-btn-yellow mui-btn-block" href="#modal" id="packetsBtn">查看记录</a><!--查看记录-->  
                            <button type="button" class="mui-btn mui-btn-green mui-btn-block" style="height: 50px;" id="startQzNext" onclick="startQz();">下一局</button>  
                        </div>  
                    </div>  
                </div>  
            </div>  
            <div id="modal" class="mui-modal">  
                <header class="mui-bar mui-bar-nav">  
                    <a class="mui-icon mui-icon-close mui-pull-right" href="#modal" style="color: blue;"></a>  
                    <h1 class="mui-title">红包战况</h1>  
                </header>  
                <div class="mui-content" style="height: 100%;" id="grabMylist">  
                    <div class="mui-scroll-wrapper" style="width: 100px;background-color: #3AC0B5;height: 100%;">  

                    </div>  
                </div>  
            </div>  
        </div>   

    </body>  
    <script src="js/mui.min.js"></script>  
    <script>  
            var oOpen = document.getElementById("open");  
            var oClose = document.getElementById("open");  
            var oContainer = document.getElementById("container");  
    </script>  
    <script src="js/mathlib-min.js"></script>   
    <script src="js/k3d-min.js"></script>    
    <script src="js/radiation.js"></script>   
    <script type="text/javascript" src="js/deskCheck.js" ></script>  
    <script type="text/javascript" src="js/desk.js" ></script>  
    <script>  
    </script>  
</html>

2、desk.js

mui.init({  
    swipeBack: false,  
    beforeback: back  
});  

//红包发放，10秒倒计时  
function alertSet(e) {  
    document.getElementById("robBtn").disabled=false;  
    document.getElementById("robBtn").style.display="block";  

    document.getElementById("js-alert-box").style.display = "block";  
    document.getElementById("js-alert-head").innerHTML = e;  
    var t = 10,  
    n = document.getElementById("js-sec-circle");  
    document.getElementById("js-sec-text").innerHTML = t;  

    //测试，目前使用的是进入页面倒计时10秒中。需求场景：当2人进入桌子后，方可开启抢庄。  
    var hbtimer = setInterval(function() {    
        if (0 == t) {  
            //打开红包“抢”界面  
            document.getElementById("js-alert-box").style.display="none";  
            document.getElementById("container").style.display="block";  
            clearInterval(hbtimer);  
        } else {  
            t -= 1,  
                document.getElementById("js-sec-text").innerHTML = t;  
            var e = Math.round(t / 10 * 735);  
            n.style.strokeDashoffset = e - 735  
        }  
    },  
    970);  
}  

var grabVillageTime = null;//抢庄时间  
var grabVillageId = null;//下注id  
var gameTime = null;//抢红包时间  

//将当前玩家信息存入服务器缓存  
var setCacheToServer=function(){  
    //当前桌内房间人数  
    document.getElementById("playerCount").innerText="11人桌,当前2人";  
    //成功加入房间后，在预加载人员列表  
    setTimeout(function () {  
        //侧滑菜单默认隐藏，这样可以节省内存；  
        menu = mui.preload({  
            id: 'right-person-menu',  
            url: 'right-person-menu.html',  
            extras:{  
                tableNum:tableNum  
            },  
            styles: {  
                left: 0,  
                width: '70%',  
                zindex: 9997  
            }  
        });  

    },5000);  
}  

//判断当前入座的人数，如果大于等于2人，系统发出抢庄指令。  
function currentPerson(e){  
    //发出指令  
    document.getElementById("js-alert-box").style.display = "block",  
    document.getElementById("js-alert-head").innerHTML = e;  
    var t = 5,   
    n = document.getElementById("js-sec-circle");   
    document.getElementById("js-sec-text").innerHTML = t;  

    //测试，目前使用的是进入页面倒计时10秒中。需求场景：当2人进入桌子后，方可开启抢庄。  
    var qztimer = setInterval(function() {   
        if (0 == t) {  
            //时间到  
            document.getElementById("qzBtn").disabled=false;  
            document.getElementById("qzBtn").style.display="block";  
            clearInterval(qztimer);  
        } else {  
            t -= 1,  
                document.getElementById("js-sec-text").innerHTML = t;  
            var e = Math.round(t / 5 * 735);  
            n.style.strokeDashoffset = e - 735  
        }  
    },970);  

}  
//当有2人进入桌子后，系统提示5秒后开始抢庄！  
function robZhuang(e){  

}  

//抢庄事件  
function qz(){  
    grabVillage();//抢庄方法  
}  

//下注事件  
function xz(){  
    bet();//下注方法  
}  

//模拟系统自动启动抢庄程序，测试用  
function startQz(){  
    document.getElementById("startQz").disabled=true;  
    document.getElementById("startQz").style.display="none";  

    document.getElementById("js-alert-box").style.display="block";  
    document.getElementById("container").style.display="none";  

    document.getElementById("qzBtn").disabled=true;  
    document.getElementById("qzBtn").style.display="none";  

    document.getElementById("xzBtn").disabled=true;  
    document.getElementById("xzBtn").style.display="none";  

    currentPerson("准备抢庄...!");//当前已经有2人，开始启动抢抢庄  
}  

//开红包  
var robObj = document.getElementById("robBtn");  
robObj.addEventListener('tap', function() {  
    grabLaisee();  

});  

//查看本桌红包记录  
var packetsObj = document.getElementById("packetsBtn");  
packetsObj.addEventListener('tap', function() {  
    document.getElementById("startQzNext").disabled=false;  
    document.getElementById("startQzNext").style.display="block";  
    mui.toast("抢到红包为1.1.1，是个炸弹哦！  ");   
});  

/****************************************************/  
//抢庄方法  

var grabVillage = function(){  
    //注意：有人抢到庄后，服务器应该马上发起下注指令。  
    document.getElementById("js-alert-head").innerHTML = "庄家：张三";  
    mui.toast("抢庄结");  

    document.getElementById("qzBtn").disabled=true;  
    document.getElementById("qzBtn").style.display="none";  
    document.getElementById("xzBtn").disabled=false;  
    document.getElementById("xzBtn").style.display="block";  

    document.getElementById("startQzNext").disabled=false;  
    document.getElementById("startQzNext").style.display="block";  
}  

//下注方法，下注时间为30秒，超过30秒则不能下注，下注成功后，保存当前用户到数据库中  
var bet = function(){  
    //数据处理成功返回数据   
        //客户端接收到指令，都在客户端计时，30秒一到，服务器只要接收到客户端最新的请求，服务器就开始发送抢红包指令  
        mui.toast("下注成功！！");  
        genLaisee();  
        document.getElementById("xzBtn").style.display="none";  
        document.getElementById("xzBtn").disabled=true;  

        document.getElementById("qzBtn").style.display="none";  
        document.getElementById("qzBtn").disabled=true;  

        document.getElementById("startQzNext").disabled=true;  
        document.getElementById("startQzNext").style.display="none";  
        //通过同步后台时间判断30秒后，准备发起红包指令  
        alertSet("抢红包倒计时开始！");  
}  

//生成红包  
var genLaisee = function(){  
    mui.toast("生成红包成功！");  
}  

//抢红包方法，返回抢红包的时间和自己所抢的金额  
var grabLaisee = function(){  
    var htmlcode ="<p class='mui-content-padded'>我的红包：1.11</p>"   
    "<ul class='mui-table-view'>"   
    "      <li class='mui-table-view-cell mui-media'>"   
    "          <a href='javascript:;'>"   
    "              <img class='mui-media-object mui-pull-left' src='images/m1.png'>"   
    "              <div class='mui-media-body'>"   
    "                  猫猫"   
    "                  <p class='mui-ellipsis'>1.04</p>"   
    "              </div>"   
    "          </a>"   
    "      </li>"   
    "      <li class='mui-table-view-cell mui-media'>"   
    "          <a href='javascript:;'>"   
    "              <img class='mui-media-object mui-pull-left' src='images/m1.png'>"   
    "              <div class='mui-media-body'>"   
    "                  猫猫"   
    "                  <p class='mui-ellipsis'>1.04</p>"   
    "              </div>"   
    "          </a>"   
    "      </li>"   
    "      <li class='mui-table-view-cell mui-media'>"   
    "          <a href='javascript:;'>"   
    "              <img class='mui-media-object mui-pull-left' src='images/m1.png'>"   
    "              <div class='mui-media-body'>"   
    "                  猫猫"   
    "                  <p class='mui-ellipsis'>1.04</p>"   
    "              </div>"   
    "          </a>"   
    "      </li>"   
    "      <li class='mui-table-view-cell mui-media'>"   
    "          <a href='javascript:;'>"   
    "              <img class='mui-media-object mui-pull-left' src='images/m1.png'>"   
    "              <div class='mui-media-body'>"   
    "                  猫猫"   
    "                  <p class='mui-ellipsis'>1.04</p>"   
    "              </div>"   
    "          </a>"   
    "      </li>"   
    "      <li class='mui-table-view-cell mui-media'>"   
    "          <a href='javascript:;'>"   
    "              <img class='mui-media-object mui-pull-left' src='images/m1.png'>"   
    "              <div class='mui-media-body'>"   
    "                  猫猫"   
    "                  <p class='mui-ellipsis'>1.04</p>"   
    "              </div>"   
    "          </a>"   
    "      </li>"   
    "      <li class='mui-table-view-cell mui-media'>"   
    "          <a href='javascript:;'>"   
    "              <img class='mui-media-object mui-pull-left' src='images/m1.png'>"   
    "              <div class='mui-media-body'>"   
    "                  猫猫"   
    "                  <p class='mui-ellipsis'>1.04</p>"   
    "              </div>"   
    "          </a>"   
    "      </li>"   
    "      <li class='mui-table-view-cell mui-media'>"   
    "          <a href='javascript:;'>"   
    "              <img class='mui-media-object mui-pull-left' src='images/m1.png'>"   
    "              <div class='mui-media-body'>"   
    "                  猫猫"   
    "                  <p class='mui-ellipsis'>1.04</p>"   
    "              </div>"   
    "          </a>"   
    "      </li>"   
    "      <li class='mui-table-view-cell mui-media'>"   
    "          <a href='javascript:;'>"   
    "              <img class='mui-media-object mui-pull-left' src='images/m1.png'>"   
    "              <div class='mui-media-body'>"   
    "                  猫猫"   
    "                  <p class='mui-ellipsis'>1.04</p>"   
    "              </div>"   
    "          </a>"   
    "      </li>"   
    "      <li class='mui-table-view-cell mui-media'>"   
    "          <a href='javascript:;'>"   
    "              <img class='mui-media-object mui-pull-left' src='images/m1.png'>"   
    "              <div class='mui-media-body'>"   
    "                  猫猫"   
    "                  <p class='mui-ellipsis'>1.04</p>"   
    "              </div>"   
    "          </a>"   
    "      </li>"   
    "      <li class='mui-table-view-cell mui-media'>"   
    "          <a href='javascript:;'>"   
    "              <img class='mui-media-object mui-pull-left' src='images/m1.png'>"   
    "              <div class='mui-media-body'>"   
    "                  猫猫"   
    "                  <p class='mui-ellipsis'>1.04</p>"   
    "              </div>"   
    "          </a>"   
    "      </li>"   
    "      <li class='mui-table-view-cell mui-media'>"   
    "          <a href='javascript:;'>"   
    "              <img class='mui-media-object mui-pull-left' src='images/m1.png'>"   
    "              <div class='mui-media-body'>"   
    "                  猫猫"   
    "                  <p class='mui-ellipsis'>1.04</p>"   
    "              </div>"   
    "          </a>"   
    "      </li>"   
    "      <li class='mui-table-view-cell mui-media'>"   
    "          <a href='javascript:;'>"   
    "              <img class='mui-media-object mui-pull-left' src='images/m1.png'>"   
    "              <div class='mui-media-body'>"   
    "                  猫猫"   
    "                  <p class='mui-ellipsis'>1.04</p>"   
    "              </div>"   
    "          </a>"   
    "      </li>";    

    document.getElementById("grabMylist").innerHTML=htmlcode;  
    mui('.mui-scroll-wrapper').scroll();  
    //改变按钮  
    document.getElementById("startQzNext").disabled=false;  
    document.getElementById("startQzNext").style.display="block";  

}  

/****************************************************/  

var main,menu,mask = mui.createMask(_closeMenu);  
var showMenu = false,mode = 'main-move';  

if (!mui.os.android) {  
    //整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；  
    //document.getElementById("move-togger").classList.remove('mui-hidden');  
    var spans = document.querySelectorAll('.android-only');  
    for (var i=0,len=spans.length;i<len;i  ) {  
        spans[i].style.display = "none";  
    }  
}  

function back() {  
    if (showMenu) {  
        //菜单处于显示状态，返回键应该先关闭菜单,阻止主窗口执行mui.back逻辑；  
        closeMenu();  
        return false;  
    } else {  
        //菜单处于隐藏状态，执行返回时，要先close菜单页面，然后继续执行mui.back逻辑关闭主窗口；  
        menu.close('none');  
        return true;  
    }  
}  

//plusReady事件后，自动创建menu窗口；  
mui.plusReady(function() {   
    main = plus.webview.currentWebview();  
    //获取传递过来的桌号  
    tableNum = main.tableNum;   
    gameModel = main.gameModel;  
    mui.toast("您已经进入11房间");  
    setCacheToServer();  

    getOnTableAllPlayerCount();  

});   

var getOnTableAllPlayerCount = function(data){  

    document.getElementById("playerCount").innerText="11人桌,当前2人";  
}  

function sendMsg(){   
    var msg = document.getElementById("msgTxt").value;  
    mui.toast("消息发送成功!");  
}  

function setRecevePerson(person){  
    //var msgValue = document.getElementById("msgTxt").value;  
    console.info(person);  
    if(person!=null){  
        document.getElementById("personValue").value="张三";//指定用户  
    }else{  
        document.getElementById("personValue").value="all";//表示桌内所有人员  
    }  
}  

//加载到桌内后，首先禁用抢庄、下注按钮  
document.getElementById("qzBtn").disabled=true;  
document.getElementById("qzBtn").style.display="none";  

document.getElementById("xzBtn").disabled=true;  
document.getElementById("xzBtn").style.display="none";  

/**  
 * 显示菜单菜单  
 */  
function openMenu() {  
    if (!showMenu) {  
        //侧滑菜单处于隐藏状态，则立即显示出来；  
        //显示完毕后，根据不同动画效果移动窗体；  
        var chat = plus.webview.getWebviewById('right-person-menu');  
//      chat.reload();  
        menu.show('none', 0, function() {  
            main.setStyle({  
                        left: '70%',  
                        transition: {  
                            duration: 150  
                        }  
                    });  
        });  
        //显示遮罩  
        mask.show();  
        showMenu = true;  
    }  
}  
/**  
 * 关闭侧滑菜单  
 */  
function closeMenu () {  
    _closeMenu();  
    //关闭遮罩  
    mask.close();  
}  

/**  
 * 关闭侧滑菜单（业务部分）  
 */  
function _closeMenu() {  
    if (showMenu) {  
        //关闭遮罩；  
        //主窗体开始侧滑；  
                main.setStyle({  
                    left: '0',  
                    transition: {  
                        duration: 150  
                    }  
                });  
                //menu页面同时移动  
        //等窗体动画结束后，隐藏菜单webview，节省资源；  
        setTimeout(function() {  
            menu.hide();  
        }, 200);  
        //改变标志位  
        showMenu = false;  
    }  
}  

//变换侧滑动画移动效果；  
mui('.mui-input-group').on('change', 'input', function() {  
    if (this.checked) {  
        switch (this.value) {  
            case 'main-move':  
                //仅主窗口移动的时候，menu页面的zindex值要低一点；  
                menu.setStyle({left:'0',zindex:9997});  
                if(mode=='all-move'){  
                    menu.setStyle({  
                        left: '0%'  
                    });  
                }  
                mode = 'main-move';  
                break;  
            case 'menu-move':  
                menu.setStyle({left:'-70%',zindex:9999});  
                if(mode=='all-move'){  
                    menu.setStyle({  
                        left: '0%'  
                    });  
                }  
                mode = 'menu-move';  
                break;  
            case 'all-move':  
                //切换为整体移动  
                //首先改变移动标志  
                slideTogether = true;  
                //变换menu界面初始化位置，整体移动时，Menu界面left需要在-70%的地方；  
                menu.setStyle({  
                    left: '-70%'  
                });  
                mode = 'all-move';  
                break;  
        }  
    }  
});  

 //点击左上角图标，打开侧滑菜单；  
document.querySelector('.mui-icon-bars').addEventListener('tap', openMenu);  
//document.getElementById("show-btn").addEventListener('tap',openMenu);  
 //在android4.4中的swipe事件，需要preventDefault一下，否则触发不正常  
 //故，在dragleft，dragright中preventDefault  
window.addEventListener('dragright', function(e) {  
    e.detail.gesture.preventDefault();  
});  
window.addEventListener('dragleft', function(e) {  
    e.detail.gesture.preventDefault();  
});  
 //主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作；  
window.addEventListener("swiperight", openMenu);  
 //主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；  
window.addEventListener("swipeleft", closeMenu);  
 //menu页面向左滑动，关闭菜单；  
window.addEventListener("menu:swipeleft", closeMenu);  

//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；  
mui.menu = function() {  
    if (showMenu) {  
        closeMenu();  
    } else {  
        openMenu();  
    }  
}

desk.zip

Trust

您好，并没有找到popover相关的内容啊。侧滑菜单也是正常的，希望您检查下代码是否有漏发。

2016-07-20 11:08

honvi (作者)

非常感谢DCloud_客服_Trust的亲自测试解决。再次谢谢。

9***@qq.com

在mui-modal修改了也没用啊

一个页面中同时存在侧滑导航和popover弹出菜单的问题？

5 个回复

公告

相关问题

一个页面中同时存在侧滑导航和popover弹出菜单的问题？

与内容相关的链接

5 个回复

公告

相关问题