文档章节

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

wenxingjun
 wenxingjun
发布于 2017/07/13 10:41
字数 394
阅读 47
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周三乱弹 —— 我居然在 osc 里追剧

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @舆情风控小组 :分享王菲的单曲《笑忘书》 《笑忘书》- 王菲 手机党少年们想听歌,请使劲儿戳(这里) @艾尔库鲁斯:如果给大家一个选择的机...

小小编辑
41分钟前
57
6
rabbitMq的客户端使用笔记

1、channel声明队列的queueDeclare方法的参数解析 durable: 是否持久化, 队列的声明默认是存放到内存中的,如果rabbitmq重启会丢失,如果想重启之后还存在就要使队列持久化,保存到Erlang自...

DemonsI
49分钟前
0
0
“全新” 编程语言 Julia开箱体验

本文共 851字,阅读大约需要 3分钟 ! 概 述 Julia 是一个 “全新”的高性能动态编程语言,前两天迎来了其 1.0 正式版的重大更新。Julia集 Python、C、R、Ruby 之所长,感觉就像一种脚本语言...

CodeSheep
今天
12
0
软件自动化测试初学者忠告

题外话 测试入门 很多受过高等教育的大学生经常问要不要去报测试培训班来入门测试。 答案是否。 高等教育的合格毕业生要具备自学能力,如果你不具备自学能力,要好好地反省一下,为什么自己受...

python测试开发人工智能安全
今天
5
0
java并发备忘

不安全的“先检查后执行”,代码形式如下: if(条件满足){ //这里容易出现线程安全问题//doSomething}else{//doOther} 读取-修改-写入 原子操作:使用CAS技术,即首先从V中读取...

Funcy1122
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部