off canvas 侧滑导航横屏时点出侧滑页，然后再将手机竖屏，页面显示出现问题，并且那个点出侧滑页的图片就看不到了；
代码如下：
{{{
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="../js/mui.min.js"></script>
<link href="../css/mui.min.css" rel="stylesheet" />
</head>
<body>
<div class="mui-off-canvas-wrap mui-draggable">
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
<h1 id="a" class="mui-title">中医网络课堂</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
</ul>
</div>
<!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var menu, showMenu = false;
mui.init({
swipeBack: false
});
mui.plusReady(function() {
menu = mui.openWindow({
id: 'left-menu',
url: 'left-menu.html',
styles: {
left: '-60%',
width: '60%',
zindex: 9998
},
show: {
aniShow: 'none'
},
waiting: {
autoShow: false
}
});
//初始化主页面位置
mui.currentWebview.setStyle({
left: 0
});
document.querySelector('.mui-icon-bars').addEventListener('tap', function() {
menu.setStyle({
left: showMenu ? '-60%' : '0%',
transition: {
duration: 200
}
});
mui.currentWebview.setStyle({
left: showMenu ? '0' : '60%',
transition: {
duration: 200
}
});
showMenu = !showMenu;
});
});
</script>
</body> </html>
}}}
4 个回复
夜帝 (作者)
补充：上面的代码是我的home.html页面的代码，home.html是程序启动时直接在index.html中打开的页面，所使用的手机的小米2s
夜帝 (作者)
发现问题出在webview.setStyle,如果A页面是在index.html中加载的，最初是left:0，在A页面中的一个按钮事件中使A.setStyle({left:10%})与A.setStyle({left:0})间切换，当设置为10%时横屏，横屏状态下切换为0%，无法恢复到原来状态
夜帝 (作者)
mui的实例中也许是因为用的openWindow没有这样的问题，但是还是有显示不了那个切换图标的问题，而且这个功能不应该仅仅只能在openWindow下才能用啊
DCloud_UNI_CHB
iOS应该没问题，android客户端可能存在横竖屏切换多webview重绘的bug，5+客户端正在解决。