mui框架-移动端跳转以及传值的简单方法（修改解决方法）

3526人阅读 2019/11/14 12:51 总访问：296164 评论：6 收藏：1 手机

分类: 前端移动端

纠结了两天的MUI跳转的问题，终于解决了，现在分享给大家，希望大家有什么坑的解决也给我分享分享哈哈，废话不多说，上代码说话：

跳转：

MUI-不建议使用a标签的href属性跳转，会出现屏蔽失效现象，在MUI跳转使用mui.openWindow({});方式跳转

首先在主页面,这是我自己写的跳转，直接给你们看了

//点击列表跳转详情，这里是一个简答的点击事件而已
	mui(".mui-table-view").on("tap","li",function(){
		//找到id和用户名，这里是通过选择器去找到自己存的相应的
		var blogid=$(this).find(".blogid").val();
		var userName=$(this).find(".userName").val();
		
		mui.openWindow({
		    url: "article_dedetails.html",  
		    id: "article_dedetails",
			
		    extras: {  
					//自定义扩展参数，可以用来处理页面间传值  
					blogid:blogid,
					userName:userName
		    },  
		    show: {  
		        autoShow: true, //页面loaded事件发生后自动显示，默认为true  
		        aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；  
		        duration: "200" //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；  
		    },  
		    waiting: {  
		        autoShow: true, //自动显示等待框，默认为true  
		        title: '正在加载...', //等待对话框上显示的提示内容  
		        options: {  
		            width: "100", //等待框背景区域宽度，默认根据内容自动计算合适宽度  
		            height: "100", //等待框背景区域高度，默认根据内容自动计算合适高度  
		             
		        }  
		    }  
		})
	});

然后你再目的页面跳转回到主页面的时候也不能用a标签的的href方式跳转要不然也会到时主页面的跳转会失效你可以用同样的方式mui.openWindow跳转回来，

或者使用mui里的<图标跳转返回就可以了

<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>//返回的图标
    <h1 class="mui-title">文章详情</h1>
</header>

以上就能跳转成功啦，如果你用a的href跳转，只能第一次加载能跳转之后的就失效没用了。

二、页面之间的传值

在跳转目的的页面

mui.plusReady(function() {
				
				var self = plus.webview.currentWebview();
				
				//拿到name和id
				alert("ID值："+self.blogid+",用户名:"+self.userName);
			});

你要从主页面跳转进来，要不然你的值从哪里来对不对，一定要记得写在mui.plusReady里面才有效，并且你这个在电脑测试没有效果，要在真机调试会看到效果。

好了下期见

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

mui框架-移动端跳转以及传值的简单方法（修改解决方法）

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}