tnblog
首页
视频
资源
登录
不帅~~但是很暖心.....
排名
14
文章
75
粉丝
21
评论
43
申请别的接口数据(网络接口)
是伍尚金哇 : 敲一夜代码,流下两三行泪水,掏空四肢五体,六杯白开水七桶泡面
mui框架-移动端跳转以及传值的简单方法(修改解决方法)
是伍尚金哇 : 测试了 可以直接在 extras: { userid:'10' //自定义扩展...
数据库的varchar和nvarchar的区别
是伍尚金哇 : 没人看 自己看一个 温习一下
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

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

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

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


跳转:

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

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

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

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

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

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


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


二、页面之间的传值

在跳转目的的页面

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

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


好了下期见

评价

是伍尚金哇_v

2019/11/14 14:00:18

[阴险]

是伍尚金哇_v

2019/11/14 14:09:16

测试了  可以直接在

extras: {  

userid:'10'

         //自定义扩展参数,可以用来处理页面间传值  

    },可以直接获取到id

2019/11/14 14:30:56 回复

剑轩

2019/11/14 14:31:26

厉害厉害![给力][威武]

是伍尚金哇_v:@剑轩回复评论这符号没有啊 O(∩_∩)O哈哈~

2019/11/14 15:50:49 回复

剑轩:@是伍尚金哇_v哈哈,那个显示的样式不是太好控制就去掉了

2019/11/15 8:51:00 回复

mui学习一 :hbuilderx常用快捷键

Dg:document.getElementById(&quot;&quot;)Dq:document.querySelectorAll(&quot;&quot;)Clog: console.log();

mui学习二: 调试状态看console.log等

看console.log上面点击一下即可也可以在浏览器上看把连接复制上去即可这样就可以了

mui学习三: mui事件

点击事件在浏览器上不行的问题mui的tag事件在浏览器上调试是不行的,要使用模拟器或者真机调试才行当然click事件还是可以执...

mui中的的意思

其实就是mui的别名而已//代码开始(function($, doc) { $.init();})(mui, document);//代码结束上面的$是mui的别名

mui轮播图与显示小圆点

html:&lt;divclass=&quot;mui-slider&quot;&gt; &lt;divclass=&quot;mui-slider-groupmui-slider-loop&quot;&gt; &lt;...

mui页面之间传值的两种方法

分析:MUI是一个封装了Html5+的框架,所以当然也可以用href来跳转,但是在移动端会出现白屏闪动的现象,用户体验极不好,经...

mui与vue.js结合实现上拉加载

我们在使用mui与vue.js结合起来的时候会导致上拉加载失败,是因为vue.js生成的时候影响了demo节点,我们只要先用vue初始化...

mui上拉加载的坑

首先是和vue.js结合起来用容易出现的坑:http://www.tnblog.net/aojiancc/article/details/2838要注意html结构:这两个样式...

mui 点击上拉加载

首先在想获取加载下一页数据时的div外设置一个想要加载的div如:&lt;divclass=&quot;mui-content-padded&quot;style=&quot;...

mui 页面传值

根据想要传的值来传到对应的页面去像这样的&lt;divclass=&quot;am-list-main&quot;&gt; &lt;h3class=&quot;am-list-item-h...

mui页面之间传值的两种方法

分析:MUI是一个封装了Html5+的框架,所以当然也可以用href来跳转,但是在移动端会出现白屏闪动的现象,用户体验极不好,经...

mui-app之评论

//显示数据的布局页面 //因为涉及到评论人和回复人所以要绑定两次数据具体如下 &lt;divid=&quot;comment&quot;v-for=&quo...

mui框架页面间的传值指针

把时髦的技术挂在嘴边,不如把过时的技术记在心里。 今天我们说的是关于MUI,一个封装了Html5+的框架间页面传值问题一,在h...

mui 关于点击事件失效的一些原因

有时候我们总会遗忘一些小细节,老是怨天怨电脑,这不行那不行的,凡是都是要细心,成功还是得看细节。所以说,以后我们敲...

mui地址栏传值的方法

地址栏传值与接收值摘要:也是种传值的方式第一步 :输入你要传值的内容location.href=&quot;main.html?Username=&quot;+$...
两情若是久长时,又岂在朝朝暮暮。