lm
lm
  • 发布:2014-09-10 12:04
  • 更新:2014-09-11 09:56
  • 阅读:2477

侧滑导航的问题

分类:HTML5+
<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>
<a class="mui-action-back mui-icon mui-icon-close mui-pull-right"></a>
<h1 class="mui-title">off canvas(侧滑导航)</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron ">
<li id="switch" class="mui-table-view-cell">
整体滑动
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<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>
<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>
mui.init({
swipeBack: false
});

var menu, showMenu = false,  
	slideTogether = false;  

window.addEventListener('pagebeforeshow', function() {
alert("11111");
menu = mui.createWindow({
id: 'listfirst',
url: 'list.html',
styles: {
left: '0%',
width: '70%'
}
});

    if (menu) {  
    menu.show('none');  
   }  
    mui.currentWebview.setStyle({  
		left: 0  
	});  
  

});

document.querySelector('.mui-icon-bars').addEventListener('tap', function() {  
	  
	mui.currentWebview.setStyle({  
		left: showMenu ? '0' : '70%',  
		transition: {  
			duration: 2  
		}  
	});  
	  
	  
		  
   showMenu = !showMenu;  
});  

为什么pagebeforeshow这个函数不加载呢。。。。。

2014-09-10 12:04 负责人:无 分享
已邀请:
DCloud_UNI_CHB

DCloud_UNI_CHB

hello mui中侧滑显示不正常?为什么修改?

  • lm (作者)

    这个是hublider的mui中的例子 我用在我的页面里就是不好使。。。。pagebeforeshow这个事件不加载呢


    2014-09-10 16:39

  • lm (作者)

    而且我改了结构 : <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">

    <script src="js/mui.min.js"></script>


    	<style>  
    html,
    body {
    background-color: #efeff4;
    }
    .mui-pull-left{line-height:20px;color:#FFFFFF}
    .mui-title{color:#FFFFFF;font-weight: bold;}
    .mui-pull-right{line-height:40px;color:#FFFFFF;font-size:14px}
    .mui-bar-nav{background:#007AFF}
    </style>
    <script>
    mui.init();
    </script>
    </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>

    <a class="mui-pull-right">通讯录</a>

    <h1 class="mui-title">中科网新</h1>

    </header>

    <div class="mui-content">

    <ul class="mui-table-view mui-table-view-chevron ">

    <li id="switch" class="mui-table-view-cell">

    整体滑动

    <div class="mui-switch">

    <div class="mui-switch-handle"></div>

    </div>

    </li>

    </ul>

    <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>

    <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>

    mui.init({

    swipeBack: false

    });


    var menu, showMenu = false,  
    slideTogether = false;

    document.addEventListener('plusready',plusReady,false);

    function plusReady(){

    menu = mui.createWindow({

    id: 'listfirst',

    url: 'app/list.html',

    styles: {

    left: '-40%',

    width: '40%'

    }

    });


        if (menu) {  
    menu.show('none');
    }
    mui.currentWebview.setStyle({
    left: 0
    });


    };


    document.querySelector('.mui-icon-bars').addEventListener('tap', function() {  
    mui.currentWebview.setStyle({
    left: showMenu ? '0' : '40%',
    transition: {
    duration: 2
    }
    });
    menu.setStyle({
    left: showMenu ? '-40%' : '0%',
    transition: {
    duration: 2
    }
    });
    showMenu = !showMenu;
    });

    改成这样 侧边栏好用了,可是调用侧边栏的时候,总会有一个临界点,就是侧边来出来的时候当主页面向右移动的时候,会有空白页面显示出来,时间极短但是能看出来有空档,瞬间就没了


    2014-09-10 16:41

lm

lm (作者)

问题解决了,之前是我想错了
mui.init({
swipeBack: false
});

var menu, showMenu = false,  
	slideTogether = false;  

document.addEventListener('plusready',plusReady,false);
function plusReady(){
menu = mui.createWindow({
id: 'listfirst',
url: 'app/list.html',
styles: {
left: '0%',
width: '40%',
zindex: 9998
}
});

    if (menu) {  
    menu.show('none');  
   }  
    mui.currentWebview.setStyle({  
		left: 0,  
		zindex: 9999  
	});  
  

};

document.querySelector('.mui-icon-bars').addEventListener('tap', function() {  
	mui.currentWebview.setStyle({  
		left: showMenu ? '0' : '40%',  
		transition: {  
			duration: 200  
		}  
	});  
	showMenu = !showMenu;  
});  

  
	//按返回图标时,关闭菜单webview  
/*document.querySelector('.mui-action-back').addEventListener('tap', closeMenu);*/  
mui.plusReady(function() {  
	//按返回键时,关闭菜单webview  
	  
	var first = null;  
			plus.key.addEventListener('backbutton', function(){  
				  
				//首次按键,提示‘再按一次退出应用’  
				mui.currentWebview.setStyle({  
	          	left: '0' ,  
	   	         transition: {  
			   duration: 200  
	     	}  
	   });  
				if(!first){  
					first = new Date().getTime();  
					mui.toast('再按一次退出应用');  
					setTimeout(function(){  
						first = null;  
					},1000);  
				}else{  
					 if(new Date().getTime()-first<1000){  
						plus.runtime.quit();  
					}  
				}  
			}, false);  

});  

</script>
这样就好了,因为安卓的 不支持页面同步转换

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