zoukankan      html  css  js  c++  java
  • mui 页面传值

    点击第一个页面的标签,跳转到第二个页面,把第一个页面的值也传往目标页面

    现在提供两种实现方式

    注意:需要在手机运行才可以,用电脑浏览器可能不支持。

    第一种方式  页面已创建,通过自定义事件传值

    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>HTML5,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是目标页的自定义事件
                        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>HTML5,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>
     

    第二种方式     页面初始化时,通过扩展参数传值;

    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: 'userId11111111111',  
                    toKen: 'toKen',  
                    userRole: 'userRole'  
                };  
      
                function SendPage(pageId, linkUrl, pageParam) {  
                    mui.openWindow({//目标页面  
                        url: 'second.html',  
                        id: 'second.html',  
                        extras: param  
                    });  
                }  
            </script>  
        </head>  
        <body>  
            <a onclick="SendPage()">跳吧</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></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>
    
     
  • 相关阅读:
    17.天堂和地狱只在你的一念之间
    14.事情原来可能更糟
    如何评价一个网站的人气(Link Popularity Check)
    1.人生何必一定要成功
    4.何不看开一点
    字符串到枚举的转换代码
    广州泳场一览表
    收集开源项目
    7.把“失去”当作“抛弃”
    经常使用的Oracle监控语句
  • 原文地址:https://www.cnblogs.com/crazycode2/p/6878441.html
Copyright © 2011-2022 走看看