文档章节

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

wenxingjun
 wenxingjun
发布于 2017/07/13 10:41
字数 394
阅读 41
收藏 1
点赞 0
评论 0
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
博文 24
码字总数 6817
作品 0
温州
2017.12.5-学习笔记:前端零碎知识点整理复习

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

演员小新 ⋅ 2017/12/05 ⋅ 0

mui混合开发(三)

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

全村的希望iOS ⋅ 01/10 ⋅ 0

mui混合开发(二)

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

全村的希望iOS ⋅ 01/10 ⋅ 0

Vue 随笔

1 . 参数传递 页面组件间相互传参 声明式:<router-link :to="..."> 编程式:router.push(...) 组件间传参 路由传参 子组件向父组件传递 子组件部分 子组件通过点击按钮触发change事件,执行...

葉子君 ⋅ 2017/11/06 ⋅ 0

Vue笔记(9) - 发布订阅模式

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

神奇的小卷毛 ⋅ 04/23 ⋅ 0

iOS 页面间传值 之 属性传值,代理传值

手机 APP 运行,不同页面间传值是必不可少,传值的方式有很多(方法传值,属性传值,代理传值,单例传值) ,这里主要总结下属性传值和代理传值. 属性传值:属性传值是最简单,也是最常见的一种传值方式...

别情花如依丶 ⋅ 2016/04/20 ⋅ 0

mui混合开发(一)

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

全村的希望iOS ⋅ 01/10 ⋅ 0

ASP.NET中页面传值技巧

在ASP.NET中有几种基于页面间的传值方法:常见的有QueryString.这种方法最简单不过了,但缺点就是它把要传送的值显示在地址栏中,如果对于在安全性的信息来说这并不是一种好的解决方案。还有...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

武侯/mui-vue2

mui-vue2 基于mui+vue2.x的H5 APP项目,页面视图全部都是html5页,不是嵌入app原生页面,项目可以直接运行在PC上调试,也可以在hbuilder上真机调试,可以直接下载安装点此链接APP下载。 项目文...

武侯 ⋅ 2017/12/30 ⋅ 0

iOS 页面间传值及自定义类拷贝问题

自定义一个TypesItem类,继承自NSObject,含有三个变量(可自定义添加多个) TypesItem.h #import <Foundation/Foundation.h> @interface TypesItem : NSObject<NSCopying>{ }@property (no......

芳仔小脚丫 ⋅ 2013/06/01 ⋅ 6

没有更多内容

加载失败,请刷新页面

加载更多

下一页

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 41分钟前 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

MVC——统一报文格式的异常处理响应

在我们写controller层的时候,常常会有这样的困惑,如果需要返回一个数据是,可能为了统一回去构造一个类似下列的数据格式: { status:true, msg:"保存成功!", data:[]} 而且在写...

alexzhu592 ⋅ 昨天 ⋅ 0

[知乎]SSH框架

网上图书馆管理系统包括管理员管理和图书管理,图书借阅,查询模块等等,网上商城包括前台页面和后台管理页面,两个都是以前别人的实际项目,只是别人用的不是SSH,我把他们改用SSH了,除了S...

颖伙虫 ⋅ 昨天 ⋅ 0

android -------- 打开本地浏览器或指定浏览器加载,打电话,打开第三方app

开发中常常有打开本地浏览器加载url或者指定浏览器加载, 还有打开第三方app, 如 打开高德地图 百度地图等 在Android程序中我们可以通过发送隐式Intent来启动系统默认的浏览器。 如果手机本身...

切切歆语 ⋅ 昨天 ⋅ 0

linux 安装docker

通过以下命令下载安装docker wget -qO- https://get.docker.com | sh 执行以上命令后输出以下内容说明安装成功,注意红框中的内容,docker安装成功后默认只有root能使用,红框中给出的提示是...

haoyuehong ⋅ 昨天 ⋅ 0

482. License Key Formatting - LeetCode

Question 482. License Key Formatting Solution 思路:字符串转化为char数组,从后遍历,如果是大写字母就转化为小写字母,如果是-就忽略,如果遍历了k个字符(排除-)就追加一个-。 Java实现...

yysue ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部