文档章节

mui mui.fire()自定义事件页面间传值

wenxingjun
 wenxingjun
发布于 2017/07/13 10:41
字数 394
阅读 56
收藏 1
mui

方法1.给预加载页面传值

first.html:

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title>mui自定义事件页面间传值</title>  
        <script src="js/mui.min.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <script type="text/javascript" charset="utf-8">  
            mui.init({  
                preloadPages: [{//预加载目标页面  
                    'url': 'second.html',  
                    'id': 'second.html'  
                }]  
            });  
            window.onload = function() {  
                var Page = null;  
                document.getElementById("a1").addEventListener('tap', function() {  
                    if (!Page) {  
                        Page = plus.webview.getWebviewById('second.html');  
                    }  
                    mui.fire(Page, 'show', {  
                        id: 'id1',     //传往second.html的值  
                        name: 'name2'  //传往second.html的值  
                    });  
                    mui.openWindow({ //目标页面  
                        id: 'second.html',  
                    });  
                });  
            }  
        </script>  
    </head>  
    <body>  
        <a id="a1">跳转</a>  
    </body>  
  
</html>  

second.html:

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title>mui自定义事件页面间传值</title>  
        <script src="js/mui.min.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <script type="text/javascript" charset="utf-8">  
             //添加newId自定义事件监听  
                window.addEventListener('show', function(event) {  
                    //获得事件参数  
                    var id = event.detail.id;  
                    var name = event.detail.name;  
                    alert(id);  
                    alert(name);  
                })  
        </script>  
    </head>  
    <body>  
    </body>  
</html>  

方法2.  页面初始化时,通过扩展参数传值

first.html:

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title>mui自定义事件页面间传值</title>  
        <script src="js/mui.min.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
            var param = { 
                userId: 'userId',  
                userName: 'userName'  
            };  
  
            function thePage() {  
                mui.openWindow({
                    url: 'second.html',  
                    id: 'second.html',  
                    extras: param  
                });  
            }  
        </script>  
    </head>  
    <body>  
        <a onclick="thePage()">新页面</a>  
    </body>  
</html>  

second.html:

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title>mui自定义事件页面间传值</title>  
        <script src="js/mui.min.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <script type="text/javascript" charset="utf-8">  
            mui.plusReady(function() {  
                var self = plus.webview.currentWebview();  
                alert(self.userId);  
            });  
        </script>  
    </head>  
    <body>  
    </body>  
</html>  

 

© 著作权归作者所有

共有 人打赏支持
wenxingjun
粉丝 0
博文 32
码字总数 6890
作品 0
温州
2017.12.5-学习笔记:前端零碎知识点整理复习

前言:最近写了一个后台管理系统的页面和一个移动端商城的页面,后台用了bootstrap框架,移动端用了mui框架。这里整理一下零零碎碎的知识点,或许就有你需要的。 pc端 1.bootstrap 中容器 co...

演员小新
2017/12/05
0
0
mui混合开发(三)

简述:当我们点击一个页面要向iOS原生一样动画过渡到下一个页面,mui的方式是打开子页面。 注意:重点说一下我遇到的问题打开子页面mui会创建一个新的webView,当你执行mui.back()这个页面会...

全村的希望iOS
01/10
0
0
mui混合开发(二)

简述:混合App的流畅性不比原生的App,当网络不好的时候出现空白页面体验很不好,mui文档给出了两个解决方案,方案一很简单,方案二是预加载模式下一章节配合mui自定义事件详细讲解 一:打开...

全村的希望iOS
01/10
0
0
Vue笔记(9) - 发布订阅模式

在这里我们记录了如何实现父子组件间的传值。 如果要在非父子组件间传值呢?我们就要用到发布订阅模式(也叫bus或总线)。 在Vue的原型上定义一个变量bus,所有所有Vue的实例或组件都将共享这...

神奇的小卷毛
04/23
0
0
mui混合开发(一)

简述:本来是一个iOS原生程序员,但是公司最近需要混合开用的是mui框架,说实话这个框架流畅性很开,但是也有一些问题,不过对于大多数的App都能适用,接下来把用的东西整理出来分享给大家 ...

全村的希望iOS
01/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

可爱的python测试开发库(python测试开发工具库汇总)

欢迎转载,转载请注明来源: github地址 谢谢点赞 本文地址 相关书籍下载 测试开发 Web UI测试自动化 splinter - web UI测试工具,基于selnium封装。 链接 selenium - web UI自动化测试。 链...

python测试开发人工智能安全
今天
2
0
Shiro | 实现权限验证完整版

写在前面的话 提及权限,就会想到安全,是一个十分棘手的话题。这里只是作为学校Shiro的一个记录,而不是,权限就应该这样设计之类的。 Shiro框架 1、Shiro是基于Apache开源的强大灵活的开源...

冯文议
今天
1
0
linux 系统的运行级别

运行级别 运行级别 | 含义 0 关机 1 单用户模式,可以想象为windows 的安全模式,主要用于修复系统 2 不完全的命令模式,不含NFS服务 3 完全的命令行模式,就是标准的字符界面 4 系统保留 5 ...

Linux学习笔记
今天
2
0
学习设计模式——命令模式

任何模式的出现,都是为了解决一些特定的场景的耦合问题,以达到对修改封闭,对扩展开放的效果。命令模式也不例外: 命令模式是为了解决命令的请求者和命令的实现者之间的耦合关系。 解决了这...

江左煤郎
今天
3
0
字典树收集(非线程安全,后续做线程安全改进)

将500W个单词放进一个数据结构进行存储,然后进行快速比对,判断一个单词是不是这个500W单词之中的;来了一个单词前缀,给出500w个单词中有多少个单词是该前缀. 1、这个需求首先需要设计好数据结...

算法之名
昨天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部