MUI - 侧滑菜单

Posted 2020-06-29

各大APP必备的侧滑菜单栏,支持手势滑动。包含QQ式、美团式等

 

结构模板

这里是示例html, 必须使用Mui框架才能使用。

主容器 <div class="mui-off-canvas-wrap mui-draggable"></div>

菜单窗体 <aside class="mui-off-canvas-right"></asign>

主窗体 <div class="mui-content mui-scroll-wrapper"></div>

左菜单 mui-off-canvas-left 右菜单 mui-off-canvas-right

 

                            
<!--侧滑菜单容器-->
<div id="Main" class="mui-off-canvas-wrap mui-draggable">  

    <!--菜单部分-->
    <aside id="offCanvasSide" class="mui-off-canvas-right">    
        <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>            

侧滑核心js代码

 

动画效果

 

主界面移动，菜单不动 默认

菜单移动，主界面不动 mui-slide-in

QQ式移动 mui-scalable

 

<script>
    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();
    
    
    //实现ios平台的侧滑关闭页面；
    if (mui.os.plus && mui.os.ios) 
    {
        Main[0].addEventListener(‘shown‘,
        function(e) { //菜单显示完成事件
            plus.webview.currentWebview().setStyle
            ({
                ‘popGesture‘: ‘none‘
            });
        });
        Main[0].addEventListener(‘hidden‘,
        function(e) 
        {     //菜单关闭完成事件
            plus.webview.currentWebview().setStyle
            ({
                ‘popGesture‘: ‘close‘
            });
        });
    }
</script>        

 

以上已经实现了基本的功能。下面是对侧滑菜单进行基本美化

 

菜单美化

只需要覆盖原有的【asign】 即可

 

<style>
    html,body 
    {
        background-color: #efeff4;
    }
    p {
        text-indent: 22px;
    }
    span.mui-icon {
        font-size: 14px;
        color: #007aff;
        margin-left: -15px;
        padding-right: 10px;
    }
    .mui-off-canvas-left {
        color: #fff;
    }
    .title {
        margin: 35px 15px 10px;
    }
    .title+.content {
        margin: 10px 15px 35px;
        color: #bbb;
        text-indent: 1em;
        font-size: 14px;
        line-height: 24px;
    }
    input {
        color: #000;
    }
</style>
<aside id="offCanvasSide" class="mui-off-canvas-left">
    <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
        <div class="mui-scroll">
            <div class="title">侧滑导航</div>
            <div class="content">
                这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式： 1.在手机屏幕任意位置向左拖动(drag)；2.点击本侧滑菜单页之外的任意位置; 3.点击如下红色按钮
                <span class="android-only">；4.Android手机按back键；5.Android手机按menu键
                </span>。
                <p style="margin: 10px 15px;">
                    <button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
                </p>

            </div>
            <div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>
            <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        Item 1
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        Item 2
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        Item 3
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        Item 4
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        Item 5
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        Item 6
                    </a>
                </li>
            </ul>
        </div>
    </div>
</aside>