上扬
上扬
  • 发布:2016-08-30 09:52
  • 更新:2016-12-08 16:48
  • 阅读:4085

mui-pages中使用侧滑offCanvas close无效

分类:MUI
mui

我想在一个mui-pages嵌套两个页面,这两个页面都带侧滑。在默认页面中打开侧滑菜单没有问题,但是关闭菜单时(即调用close方法)无法关闭侧滑菜单。表现为点击左箭头关闭时侧滑菜单遮罩层消失,但是菜单并不会收起,再次点击时报错:[Web浏览器] "Uncaught TypeError: Cannot read property 'offsetWidth' of null",具体表现详情请见附件图片,盼解答

代码如下:


HTML  
<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title></title>  
        <!--标准mui.css-->  
        <link rel="stylesheet" href="../../../css/mui.css">  
        <link rel="stylesheet" href="../css/credit.css"/>  
    </head>  

    <body class="mui-fullscreen">  
        <!--页面主结构开始-->  
        <div id="div_credit_main" class="mui-views">  
            <div class="mui-view">  
                <div class="mui-pages">  
                </div>  
            </div>  
        </div>  
        <!--页面主结构结束-->  
        <!--表格页面开始-->  
        <div id="div_credit_table" class="mui-page">  
            <!-- 侧滑导航根容器 -->  
            <div id="div_credit_table_content" class="mui-off-canvas-wrap mui-draggable mui-slide-in">  
                <!-- 主页面容器 -->  
                <div class="mui-inner-wrap">  
                    <!--页面标题栏开始-->  
                    <header class="mui-bar mui-bar-nav">  
                        <a class="mui-btn-link mui-pull-left" style="color: #666; margin-left: 7px;">授信管理</a>  
                        <a id="a_credit_table_search" class="mui-pull-right">  
                            <button type="button" class="mui-btn mui-pull-right" style="vertical-align: middle;">  
                    <span class="mui-active mui-icon mui-icon-search" style="font-size: large; font-weight: bolder;"></span>&nbsp;查询  
                </button>  
                        </a>  
                    </header>  
                    <!--页面标题栏结束-->  
                    <!-- 主界面具体展示内容 -->  

                    <div class="mui-off-canvas-backdrop"></div>  
                </div>  
                <!-- 菜单容器 -->  
                <aside class="mui-off-canvas-right">  
                    <div class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <!-- 菜单具体展示内容 -->  
                            <header class="mui-bar mui-bar-nav">  
                                <a id="a_credit_table_conditions_back" class="mui-icon mui-icon-left-nav mui-pull-left"></a>  
                                <h1 class="mui-title">查询</h1>  
                            </header>  
                            <div class="mui-content">  
                                <div class="mui-content-padded">  
                                    <form>  
                                        <div class="mui-input-row">  
                                            <label>查询方式</label>  

                                            <form class="mui-input-row">  
                                                <div class="mui-input-row mui-radio mui-left">  
                                                    <label>radio</label>  
                                                    <input name="radio1" type="radio">  
                                                </div>  
                                                <div class="mui-input-row mui-radio mui-left">  
                                                    <label>radio</label>  
                                                    <input name="radio1" type="radio" checked>  
                                                </div>  
                                                <div class="mui-input-row mui-radio mui-left mui-disabled">  
                                                    <label>disabled radio</label>  
                                                    <input name="radio1" type="radio" disabled="disabled">  
                                                </div>  
                                            </form>  
                                        </div>  
                                        <div class="mui-input-row">  
                                            <label>请选择</label>  
                                            <select>  
                                                <option>全部</option>  
                                                <option>湖北中拓建博升建材部</option>  
                                                <option>湖北中拓</option>  
                                                <option>四川中拓</option>  
                                            </select>  
                                        </div>  
                                        <div class="mui-button-row">  
                                            <button type="button" id="btn_credit_table_ok" onclick="btnOkOnClick(1);" class="mui-btn mui-btn-primary">确定</button>  
                                        </div>  

                                    </form>  
                                    <!--end form-->  

                                </div>  

                            </div>  
                            <!--  
                                end 菜单内容  
                            -->  
                        </div>  
                    </div>  
                </aside>  
            </div>  
        </div>  
        <!--表格页面结束-->  
        <!--列表页面开始-->  
        <div id="div_credit_list" class="mui-page">  
            <!-- 侧滑导航根容器 -->  
            <div id="div_credit_list_content" class="mui-off-canvas-wrap mui-draggable mui-slide-in">  
                <!-- 主页面容器 -->  
                <div class="mui-inner-wrap">  
                    <!-- 主页面标题 -->  
                    <header class="mui-bar mui-bar-nav">  
                        <a class="mui-btn-link mui-pull-left" style="color: #666; margin-left: 7px;">授信管理</a>  
                        <a id="a_credit_list_search" class="mui-pull-right">  
                            <button type="button" class="mui-btn mui-pull-right" style="vertical-align: middle;">  
                    <span class="mui-active mui-icon mui-icon-search" style="font-size: large; font-weight: bolder;"></span>&nbsp;查询  
                </button>  
                        </a>  
                    </header>  
                    <!-- 主界面具体展示内容 -->  

                    <div class="mui-off-canvas-backdrop"></div>  
                </div>  
                <!-- 菜单容器 -->  
                <aside class="mui-off-canvas-right">  
                    <div class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <!-- 菜单具体展示内容 -->  
                            <header class="mui-bar mui-bar-nav">  
                                <a id="a_credit_list_conditions_back" class="mui-icon mui-icon-left-nav mui-pull-left"></a>  
                                <h1 class="mui-title">查询</h1>  
                            </header>  
                            <div class="mui-content">  
                                <div class="mui-content-padded">  
                                    <form>  
                                        <div class="mui-input-row">  
                                            <label>查询方式</label>  

                                            <form class="mui-input-row">  
                                                <div class="mui-input-row mui-radio mui-left">  
                                                    <label>A</label>  
                                                    <input name="radio1" type="radio">  
                                                </div>  
                                                <div class="mui-input-row mui-radio mui-left">  
                                                    <label>B</label>  
                                                    <input name="radio1" type="radio" checked>  
                                                </div>  
                                                <div class="mui-input-row mui-radio mui-left">  
                                                    <label>C</label>  
                                                    <input name="radio1" type="radio">  
                                                </div>  
                                            </form>  
                                        </div>  
                                        <div class="mui-input-row">  
                                            <label>请选择</label>  
                                            <select>  
                                                <option>全部</option>  
                                                <option>湖北中拓建博升建材部</option>  
                                                <option>湖北中拓</option>  
                                                <option>四川中拓</option>  
                                            </select>  
                                        </div>  
                                        <div class="mui-button-row">  
                                            <button type="button" id="btn_credit_list_ok" class="mui-btn mui-btn-primary" onclick="btnOkOnClick(2);">确定</button>  
                                        </div>  

                                    </form>  
                                    <!--end form-->  

                                </div>  

                            </div>  
                            <!--  
                                end 菜单内容  
                            -->  
                        </div>  
                    </div>  
                </aside>  
            </div>  
        </div>  
        <!--列表页面结束-->  
        <script type="text/javascript" id="seajsnode" src="../../../js/seajs/sea-all.min.js"></script>  
        <script src="../../../js/mui/mui.min.js"></script>  
        <script src="../../../js/mui/mui.view.js"></script>  
        <script type="text/jscript">  
            //加载主模板块  
            seajs.use("../js/credit.js", function() {  

            });  

            function btnOkOnClick(index) {  
                switch(index) {  
                    case 1:  
                    alert(1);  
                        break;  
                    case 2:  
                        break;  
                }  
            }  
        </script>  
    </body>  

</html>  
2016-08-30 09:52 负责人:无 分享
已邀请:
上扬

上扬 (作者)

define(function(require, module, exports) {  
    var m = require("mui");  
    var Vue = require("vue");  
    var app = require("../../../js/common/App.js");  

    var tableCanvasQuery = m("#div_credit_table_content").offCanvas();  
    var listCanvasQuery = m("#div_credit_list_content").offCanvas();  

    m.init(function() {  

    });  

    m.plusReady(function() {  

    });  

    //初始化单页view  
    var viewMain = m('#div_credit_main').view({  
        defaultPage: '#div_credit_table'  
    });  

    //  m('.mui-scroll-wrapper').scroll();  

    var view = viewMain.view;  
    (function($) {  
        //处理view的后退与webview后退  
        var oldBack = $.back;  
        $.back = function() {  
            if(viewMain.canBack()) { //如果view可以后退,则执行view的后退  
                viewMain.back();  
            } else { //执行webview后退  
                oldBack();  
            }  
        };  
        //监听页面切换事件方案1,通过view元素监听所有页面切换事件,目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)  
        //第一个参数为事件名称,第二个参数为事件回调,其中e.detail.page为当前页面的html对象  
        view.addEventListener('pageBeforeShow', function(e) {  
            //              console.log(e.detail.page.id + ' beforeShow');  
        });  
        view.addEventListener('pageShow', function(e) {  
            //              console.log(e.detail.page.id + ' show');  
        });  
        view.addEventListener('pageBeforeBack', function(e) {  
            //              console.log(e.detail.page.id + ' beforeBack');  
        });  
        view.addEventListener('pageBack', function(e) {  
            //              console.log(e.detail.page.id + ' back');  
        });  
    })(m);  

    document.getElementById("a_credit_table_search").addEventListener("tap", function() {  
        tableCanvasQuery.show();  
    }, false);  
    document.getElementById("a_credit_table_conditions_back").addEventListener("tap", function() {  
        tableCanvasQuery.close();  
    }, false);  
    document.getElementById("a_credit_list_search").addEventListener("tap", function() {  
        listCanvasQuery.show();  
    }, false);  
    document.getElementById("a_credit_list_conditions_back").addEventListener("tap", function() {  
        listCanvasQuery.close();  
    }, false);  

});

css:
html,
body {
height: 100%;
width: 100%;
}

.mui-off-canvas-left, .mui-off-canvas-right{
width: 90%;
background-color: #efeff4;
}

.mui-views,
.mui-view,
.mui-pages,
.mui-page,
.mui-page-content {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #efeff4;
}

.mui-pages {
height: auto;
}

.mui-scroll-wrapper,
.mui-scroll {
background-color: #efeff4;
}

.mui-page.mui-transitioning {
-webkit-transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
}

.mui-page-left {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.mui-ios .mui-page-left {
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
}

.mui-navbar {
position: fixed;
right: 0;
left: 0;
z-index: 10;
height: 44px;
background-color: #f7f7f8;
}

.mui-navbar .mui-bar {
position: absolute;
background: transparent;
text-align: center;
}

.mui-android .mui-navbar-inner.mui-navbar-left {
opacity: 0;
}

.mui-ios .mui-navbar-left .mui-left,
.mui-ios .mui-navbar-left .mui-center,
.mui-ios .mui-navbar-left .mui-right {
opacity: 0;
}

.mui-navbar .mui-btn-nav {
-webkit-transition: none;
transition: none;
-webkit-transition-duration: .0s;
transition-duration: .0s;
}

.mui-navbar .mui-bar .mui-title {
display: inline-block;
width: auto;
}

.mui-page-shadow {
position: absolute;
right: 100%;
top: 0;
width: 16px;
height: 100%;
z-index: -1;
content: '';
}

.mui-page-shadow {
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
}

.mui-navbar-inner.mui-transitioning,
.mui-navbar-inner .mui-transitioning {
-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
transition: opacity 300ms ease, transform 300ms ease;
}

.mui-page {
display: none;
}

.mui-pages .mui-page {
display: block;
}

.mui-page .mui-table-view:first-child {
margin-top: 15px;
}

.mui-page .mui-table-view:last-child {
margin-bottom: 30px;
}

.mui-table-view {
margin-top: 20px;
}

.mui-table-view span.mui-pull-right {
color: #999;
}

.mui-table-view-divider {
background-color: #efeff4;
font-size: 14px;
}

.mui-table-view-divider:before,
.mui-table-view-divider:after {
height: 0;
}

.head {
height: 40px;
}

head {

line-height: 40px;  

}

.head-img {
width: 40px;
height: 40px;
}

head-img1 {

position: absolute;  
bottom: 10px;  
right: 40px;  
width: 40px;  
height: 40px;  

}

.update {
font-style: normal;
color: #999999;
margin-right: -25px;
font-size: 15px
}

.mui-fullscreen {
position: fixed;
z-index: 20;
background-color: #000;
}

.mui-ios .mui-navbar .mui-bar .mui-title {
position: static;
}

.p-credit {
font-size: small;
color: #B6B6B6;
display: -webkit-box;
}

.span-credit,
.span-credit-red,
.span-credit-gray {
display: -webkit-inline-flex;
}

.span-credit-red {
color: red;
}

.span-credit-gray {
color: #666;
}

上扬

上扬 (作者)

刚试了下,设置style.display可以解决上面的问题,但是不确定会不会引起其他问题

  • 师宁丶

    请问这个具体怎么改。。

    2016-09-29 09:44

上扬

上扬 (作者)

设置style.display就是手动设置侧滑菜单的显示隐藏,不过
放在同一页面依然会出问题,最后还是改了需求,拆分成两个页面实现的

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