sky8652
sky8652
  • 发布:2014-10-31 22:52
  • 更新:2014-11-01 22:51
  • 阅读:1971

首页同时使用侧滑栏和子页调用 出现侧滑栏在子页底下

分类:MUI

代码如下
{{{
<div class="mui-off-canvas-wrap">
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-left"></a>
<h1 class="mui-title">广东文网</h1>

    </header>  
    <aside id="offCanvas" class="mui-off-canvas-left">  
        <button id="offCanvasHide" class="mui-btn mui-btn-primary mui-btn-block">  
            关闭侧滑菜单(js call)  
        </button>  
        <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>  
        </ul>  
    </aside>  
    <script>  
    mui.init({  
            swipeBack : false,  
            subpages : [{  
                id : 'list',  
                url : 'list.html',  
                styles : {  
                    top : '80px',  
                    bottom : 0,  
                    bounce :'vertical'  
                    //scrollIndicator : "none"  
                }  
            }]  
        });  
        </script>  
    <!-- off-canvas backdrop -->  
    <div class="mui-off-canvas-backdrop"></div>  
</div>  

</div>
<script>
mui.init({
swipeBack : false,
});
var offCanvasContainer = document.querySelector('.mui-off-canvas-wrap');
var offCanvasInnerContainer = offCanvasContainer.querySelector('.mui-inner-wrap');
var offCanvas = mui('#offCanvas');
document.getElementById('switch').addEventListener('toggle', function(event) {
if (event.detail.isActive) {//整体滑动时,侧滑菜单在inner-wrap内
offCanvasInnerContainer.insertBefore(offCanvas[0], offCanvasInnerContainer.firstElementChild);
} else {//仅主内容滑动时,侧滑菜单在off-canvas-wrap内
offCanvasContainer.insertBefore(offCanvas[0], offCanvasContainer.firstElementChild)
}
});
document.getElementById('offCanvasShow').addEventListener('tap', function() {
//offCanvas.offCanvas('toggle')//toggle or show;
offCanvas.offCanvas('show');
});
document.getElementById('offCanvasHide').addEventListener('tap', function() {
//offCanvas.offCanvas('toggle')//toggle or hide;
offCanvas.offCanvas('hide');
});
</script>
}}}

代码部分是抄mui hello 如何解决这个问题

2014-10-31 22:52 负责人:无 分享
已邀请:
DCloud_UNI_CHB

DCloud_UNI_CHB

代码好乱啊,重新整理以下,或者将整个文件以附件上传以下吧。

sky8652

sky8652 (作者) - 一位80后码农

问题解决了,谢谢 hbcui1984 的回复 我直接新建个webview 做侧滑

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