hnatao
hnatao
  • 发布:2015-03-31 17:55
  • 更新:2015-03-31 17:55
  • 阅读:1991

offcanvas-drag-right.html 页面 bug

分类:MUI
  1. 新建了mui的示例代码
  2. 把左滑页面设置为启动页面
    "launch_path": "examples/offcanvas-drag-right.html"
  3. 把页面做了最精简处理。
  4. 代码如下:
    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8">
    <title>Hello MUI</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">  
    <style>  
        html,  
        body {  
            background-color: #efeff4;  
        }  
    </style>  

    </head>

    <body>
    <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
    <aside id="offCanvasSide" class="mui-off-canvas-left">
    <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
    <div class="mui-scroll">
    <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">

                    </ul>  
                </div>  
            </div>  
        </aside>  
    
        <div class="mui-inner-wrap">  
            <header class="mui-bar mui-bar-nav">  
                <a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>  
                <h1 class="mui-title">右滑导航</h1>  
            </header>  
            <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">  
                <div class="mui-scroll">  
    
                </div>  
            </div>  
    
            <div class="mui-off-canvas-backdrop"></div>  
        </div>  
    </div>  
    <script src="../js/mui.min.js"></script>  
    <script src="../js/app.js"></script>  
    <script>  
        mui.init({  
            swipeBack: false,  
        });  
    
         //侧滑容器父节点  
        var offCanvasWrapper = mui('#offCanvasWrapper');  
    
         //主界面容器  
        var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');  
    
         //菜单容器  
        var offCanvasSide = document.getElementById("offCanvasSide");  
    
         //移动效果是否为整体移动  
        var moveTogether = false;  
         //侧滑容器的class列表,增加.mui-slide-in即可实现菜单移动、主界面不动的效果;  
        var classList = offCanvasWrapper[0].classList;  
         //变换侧滑动画移动效果;  
    
         //主界面和侧滑菜单界面均支持区域滚动;  
        mui('#offCanvasSideScroll').scroll();  
        mui('#offCanvasContentScroll').scroll();  
    </script>  

    </body>

</html>

  1. 通过调试状态运行这个页面,运行正常。
  2. 我打包后,第一次安装启动,滑动页面运行不正常:不能显示菜单。
  3. 关闭页面,第二次启动,第三次启动,第n次启动,滑动页面运行正常。

该问题第一次安装启动,问题必现。

请大牛帮忙查下原因。

2015-03-31 17:55 负责人:无 分享
已邀请:

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