tnblog
首页
视频
资源
登录
不帅~~但是很暖心.....
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

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

4369人阅读 2019/11/14 12:51 总访问:350547 评论:6 收藏:1 手机
分类: 前端移动端

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


跳转:

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

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

//点击列表跳转详情,这里是一个简答的点击事件而已
	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里面才有效,并且你这个在电脑测试没有效果 ,要在真机调试会看到效果。


好了下期见

评价