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', {
                            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>
  • 相关阅读:
    java object bean 转map
    常用css
    mysql 生成max+1编号
    MySql避免重复插入记录方法(ignore,Replace,ON DUPLICATE KEY UPDATE)
    cookie记住账户密码
    session有效时间
    常用jstl
    高性能MySQL--innodb中事务的隔离级别与锁的关系
    mysql8.0.11的坑早知道
    git进阶--你可能不知道的很好用git功能
  • 原文地址:https://www.cnblogs.com/MarchThree/p/6439316.html
Copyright © 2011-2022 走看看