文档章节

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

wenxingjun
 wenxingjun
发布于 2017/07/13 10:41
字数 394
阅读 64
收藏 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
温州
私信 提问
MUI在Android与IOS上的一些小问题以及一些框架的用法

我费话少说,上正文; 区域滚动与下拉刷新、上拉加载在安卓上有冲突,一但调用了区域滚动也就是: 那么区域滚动在安卓上将无法滑动,iOS则没有影响。 并且就算iOS没有初始化区域滚动也没有影...

教父君
11/07
0
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
ASP.NET中页面传值技巧

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

晨曦之光
2012/03/09
268
0

没有更多内容

加载失败,请刷新页面

加载更多

isEmpty和null的区别

isEmpty和null的区别: 1.一个是对象为空(IsNull),一个是值为空(IsEmpty) 2.IsNull指任务类型变量是否为空包括对象类型的变量。 IsNull函数: 功能:返回Boolean的值,指明表达是否不包...

DemonsI
5分钟前
0
0
Centos7 安装mysql与php

https://blog.csdn.net/qq_36431213/article/details/79576025 官网下载安装mysql-server 依次使用下面三个命令安装 wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.r......

Yao--靠自己
14分钟前
0
0
详解如何实现一个简单的 vuex

首先我们需要知道为何要使用 vuex。父子组件通信用 prop 和自定义事件可以搞定,简单的非父子组件通信用 bus(一个空的 Vue 实例)。那么使用 vuex 就是为了解决复杂的非父子组件通信。 仅仅...

嫣然丫丫丫
19分钟前
1
0
算法——RangePartitioner实现之reservoirSample

简介 reservoir的作用是:**在不知道文件总行数的情况下,如何从文件中随机的抽取一行?**即是说如果最后发现文字档共有N行,则每一行被抽取的概率均为1/N? 我们可以:定义取出的行号为cho...

freeli
22分钟前
1
0
Python安装及netcdf数据读写

一、在CentOS7系统上安装Python3 在anaconda官网下载(http://https://www.anaconda.com/download/#linux)(Anaconda指的是一个开源的Python发行版本,是Python的包管理器和环境管理器) 下...

voole
26分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部