mui中webview模式实现侧滑菜单子页面、导航子页面（原创转载请附上博文链接）

最新推荐文章于 2020-02-23 19:56:22 发布

真是6的不行

最新推荐文章于 2020-02-23 19:56:22 发布

阅读量2.1k

点赞数

分类专栏： mui js 文章标签： mui

本文链接：https://blog.csdn.net/qq_23878541/article/details/90579005

版权

js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

mui

7 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body id="body">
        <!-- 主页面标题 -->
        <header class="mui-bar mui-bar-nav">
            <a class="mui-icon mui-pull-left" id="sideMenuBtn"></a>
            <h1 class="mui-title">标题</h1>
        </header>
		
		<!-- 主页面内容容器 -->
		<div class="mui-content">

		</div>
        
        <!-- 底部导航 -->
        <nav class="mui-bar mui-bar-tab">
		    <a class="mui-tab-item mui-active" id="tab0">
		        <span class="mui-icon mui-icon-home"></span>
		        <span class="mui-tab-label">首页</span>
		    </a>
		    <a class="mui-tab-item" id="tab1">
		        <span class="mui-icon mui-icon-phone"></span>
		        <span class="mui-tab-label">电话</span>
		    </a>
		    <a class="mui-tab-item" id="tab2">
		        <span class="mui-icon mui-icon-email"></span>
		        <span class="mui-tab-label">邮件</span>
		    </a>
		    <a class="mui-tab-item" id="tab3">
		        <span class="mui-icon mui-icon-gear"></span>
		        <span class="mui-tab-label">设置</span>
		    </a>
		</nav>
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			
	        var subPageUrl = ['tab1.html','tab2.html','tab3.html','tab4.html'];//子页面的路径
	        var subWebview = {};//子页面的webview
	        var menu = null;//侧边菜单的webview
	        var currentTabIndex = 0;//当前tab的下标
	        
	        mui.plusReady(function(){
	        	//预加载tab页面，并将页面添加到主页面
	        	var main = plus.webview.currentWebview();//当前页面是主页面，直接取得
	        	for(i in subPageUrl){
	        		//alert(subPageUrl[i])
	        		subWebview[i] = mui.preload({//预加载每个子页面，生成的webview加入视图集合
	        			id: subPageUrl[i],
	        			url: subPageUrl[i],
	        			styles: {//设置子页面样式
							top: '44px',//距离顶部44px
							bottom: '51px',//距离底部51px
							left: '0px',
							bounce: 'vertical',
							bounceBackground: '#DCDCDC'
						},
						waiting: {
							autoShow: false //不显示
						}
	        		})
	        		subWebview[i].hide();//初始化每个子页面为隐藏状态
	        		main.append(subWebview[i]);//将子页面添加到主页面中
	        	}
	        	subWebview[currentTabIndex].show();//显示第一个tab子页面
	        	//预加载侧边菜单
	        	menu = mui.preload({
					url: "side.html",
					id: "side.html",
					styles: {
						left: '-80%',
						width: "80%",
						mask: 'rgba(0,0,0,0)'
					},
					show: {
						aniShow: "none"//无动画效果
					}
				});
				menu.show();//初始化侧边栏为显示状态
	        	/************************************************/
	        	
	        	//监听tab切换
	        	mui(".mui-bar-tab").on("tap","a",function(){
	        		var id = mui(this)[0].getAttribute("id");
	        		var tabIndex = id.replace("tab","");
	        		if(currentTabIndex == tabIndex){
	        			return;
	        		}else{
	        			currentTabIndex = tabIndex;
	        			var tabUrl = subPageUrl[tabIndex];//取得webview的路径，也是id
	        			subWebview[currentTabIndex].hide();//隐藏当前的页面
	        			subWebview[tabIndex].show();//显示需要显示的页面
	        		}
	        	})
	        	
	        	/************************************************/
	        	
	        	//滑动方式打开、关闭侧边菜单，对当前主页面main，添加窗口滑动事件
	        	var menuIsShow = false;
	        	main_slide("right");//初始化右滑
	        	function main_slide(direction){
	        		main.drag({
						direction: direction,//滑动方向，现在是同时能左右滑动，不知道为什么
						callbackStep: 10,//滑屏操作回调事件触发步长,移动距离超过可移动范围的10%则触发一次回调事件
						moveMode: 'silent'//滑动手势模式,silent当前Webview窗口不跟随手指滑动
					}, {
						view: menu,//手势关联对象,可取值Webview窗口的id（String类型）、Webview窗口对象、原生View窗口对象（plus.nativeObj.View）
						moveMode: 'follow'//滑动模式,"follow" - 同步跟随主Webview窗口滑动； "silent" - 不跟随主Webview窗口滑动。
					}, function(e, s) {
						//e.type表示滑动状态，分三种start(开始滑动)、move(滑动中)、end(滑动结束)
						//e.progress表示进度，分两种0(回到起点)、100(滑动完毕)
						//console.log('left drag event: ' + JSON.stringify(e));
						if(!menuIsShow){//如果菜单不是显示状态下,则滑动显示菜单
							main.setStyle({
								mask: "rgba(0,0,0,0.4)" // main显示遮罩层
							});
							if(e.type === "end" && e.progress === "100"){// 如果滑动到终点
								menuIsShow = true;
							}
							if(e.type === "end" && e.progress === "0"){//如果回到起点，则取消main遮罩层
								main.setStyle({
									mask: "none"
								});
							}
						}else{//如果菜单是显示状态下，则滑动关闭侧边菜单
							if(e.type === "end" && e.progress === "100"){// 如果滑动到终点
								main.setStyle({
									mask: "none" // main取消遮罩层
								});
								menuIsShow = false;
							}
						}
						
					});
	        	}
	        	
	        	
	        	
	        	//点击方式打开侧边栏
	        	/*document.getElementById("sideMenuBtn").addEventListener("tap",function(){
	        		if(!menuIsShow){//如果菜单不是显示状态下
						menuIsShow = true;
						//主窗体开始侧滑并显示遮罩
						main.setStyle({
							mask: "rgba(0,0,0,0.4)",
							transition: {
								duration: 150
							}
						});
						//侧边栏开始侧滑并显示
	        			menu.setStyle({
							mask: "rgba(0,0,0,0)",
							left: 0,
							transition: {
								duration: 250
							}
						});
	        		}
	        	})*/
	        	
	        	//点击遮罩关闭侧滑菜单
				main.addEventListener("maskClick", function(){
					if(menuIsShow){//侧边栏如果是显示状态
						menuIsShow = false;
						//侧边栏开始侧滑并隐藏
	        			menu.setStyle({
							mask: "rgba(0,0,0,0)",
							left: "-80%",
							transition: {
								duration: 200
							}
						});
						//主窗体取消遮罩
						mui.later(function() {
							main.setStyle({
								mask: 'none'
							});
						}, 200);
					}
				});
	        	
	        })
		</script>
	</body>

</html>

真是6的不行

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
mui中webview模式实现侧滑菜单子页面、导航子页面（原创转载请附上博文链接）

<!doctype html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,ma...
复制链接

扫一扫