- 新建了mui的示例代码
- 把左滑页面设置为启动页面
"launch_path": "examples/offcanvas-drag-right.html"
- 把页面做了最精简处理。
-
代码如下:
<!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>
- 通过调试状态运行这个页面,运行正常。
- 我打包后,第一次安装启动,滑动页面运行不正常:不能显示菜单。
- 关闭页面,第二次启动,第三次启动,第n次启动,滑动页面运行正常。
该问题第一次安装启动,问题必现。
请大牛帮忙查下原因。