mui提供了两种侧滑导航实现：webview模式和div模式，两种模式各有优劣，适用于不同的场景。
webview模式
　　主页面和菜单内容在不同的webview中，两个页面根据内容需求分别组织DOM结构，mui对其DOM结构无特殊要求，故其有如下优点：
- 菜单内容是单独的webview，故可被多个页面复用；
- 菜单内容在单独的webview中，菜单区域的滚动不影响主界面，故可使用原生滚动，滚动更为流畅
另一方面，webview模式也有其缺点：
- 不支持拖动手势（跟手拖动）；
- 主页面、菜单不同webview实现，因此若需交互（如：点击菜单触发主页面内容变化），需使用自定义事件实现跨webview通讯；
div模式
主页面和菜单内容在同一个webview下，嵌套在特定结构的div中，通过div的移动动画模拟菜单移动；故该模式有如下优点：
- 支持拖动手势（跟手拖动）；
- 主页面、菜单在一个页面中，可通过JS轻松实现两者交互（如：点击菜单触发主页面内容变化），没有跨webview通讯的烦恼；
另一方面，div模式也有其缺点：
- 不支持菜单内容在多页面的复用，需每个页面都生成对应的菜单节点；

下面是主要代码，link相关的文件应该就可以产生相应的效果。这就是一个固定的结构，效果的产生是由于相应的css和js。
mui.init()中的swipeBack：true的作用是启动右滑关闭功能。

<head>
    <link href="../css/mui.min.css" rel="stylesheet" />
</head>
<body>
    <!--侧滑菜单容器，包括主界面-->
    <div id="Main" class="mui-off-canvas-wrap mui-draggable">  
        <!--菜单部分-->
        <aside id="offCanvasSide" class="mui-off-canvas-left">    
            <div id="offCanvasSideScroll" class="mui-scroll-wrapper">            
                 <button id="offCanvasHide" type="button" >关闭侧滑菜</button>        
            </div>
        </aside>

        <!-- 主界面 -->
        <div class="mui-inner-wrap">
            <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
                <button id="offCanvasShow" type="button" >显示侧滑菜单</button>
            </div>
            <!-- 这个东西不能删，利用他还原界面 -->
            <div class="mui-off-canvas-backdrop"></div>
        </div>

    </div>

    <script src="../js/mui.min.js"></script>
    <script type="text/javascript">
        mui.init
        ({
            swipeBack: false,//
        });    

        var Main = mui('#Main');//侧滑容器父节点
        Main[0].classList.add('mui-scalable');//动画效果的类，通过这个应该可以调整动画类型，也可以去掉，效果也不错
        Main.offCanvas().refresh();//绑定动画效果           
/*给主界面按钮添加点击事件*/                                                                        document.getElementById('offCanvasShow').addEventListener('tap',function() 
        {
            Main.offCanvas('show');
        });
/*给侧滑菜单中的按钮添加点击事件*/
document.getElementById('offCanvasHide').addEventListener('tap',function()
        {
            Main.offCanvas('close');
        });
        //支持区域滚动，需要添加.mui-scroll-wrapper
        mui('#offCanvasSideScroll').scroll();    
        mui('#offCanvasContentScroll').scroll();
    </script>
</body>
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生