海洋鳓
海洋鳓
  • 发布:2016-10-20 16:50
  • 更新:2016-10-20 16:50
  • 阅读:27874

mui页面间跳转并且传值以及fire()方法

分类:MUI
刚开始学mui时,页面跳转传值无疑是很多初学者遇到的难题。这里分享一个我自己调试好了的两个页面间操作:  
场景是index.html页面跳转至a.html页面并且传值(包括预加载参数跟fire()带的参数)。注意,这里用到的方法是很多方法中的一种,有需要改进的地方,请多多指教。我也是初学O(∩_∩)O。  
【index.htm页面代码如下】:  
<!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.init();  
        </script>  
    </head>  

    <body>  
        <div class="mui-content">  
            <button type="button" id="bbtn" class="mui-btn mui-btn-blue">a.html</button>  
            <div id="sss">....</div>  
        </div>  
    </body>  
    <script>  
        var apage = null;  
        mui.plusReady(function() {  
            mui.preload({  
                url: "a.html",  
                id: "a.html", //默认使用当前页面的url作为id  
                styles: {}, //窗口参数  
                extras: {  
                    idd: "mui.preload预加载页面了"  
                } //自定义扩展参数  
            });  

            document.getElementById("bbtn").addEventListener('tap', function() {  
                if(apage == null) {  
                    apage = plus.webview.getWebviewById("a.html");  
                }  
                mui.fire(apage, 'hahah', {  
                    idd: "ID是我"  
                });  
                apage.show();  
            })  
        });  
    </script>  
    <script>  
        document.addEventListener('backIndexPage', function(ee) {  
            document.getElementById("sss").innerText = ee.detail.str;  
        })  
    </script>  

</html>  

【a.html页面代码如下】:  
<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <script src="js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  
        </script>  
    </head>  

    <body>  
        <div class="mui-content">  
            <button type="button" id="anniu">返回</button>  
            <div id="ggg">....</div>  
            <div id="ggg1">....</div>  
        </div>  
    </body>  
    <script>  
        document.addEventListener('hahah', function(e) {  
            var ppg = plus.webview.currentWebview();  
            //var ppg = plus.webview.getWebviewById('a.html');  
            document.getElementById("ggg").innerText = "fire事件参数:" + e.detail.idd;  
            document.getElementById("ggg1").innerText = "页面预加载参数:" + ppg.idd;  
        })  

        document.getElementById("anniu").addEventListener('tap',function(){  
            //var indexPage=plus.webview.getWebviewById('index.html');  
            var indexPage=plus.webview.getLaunchWebview();//获取首页对象  
            console.log(indexPage);  
            mui.fire(indexPage,'backIndexPage',{str:"我回来了!"});  
            mui.back();  
        })  
    </script>  

</html>  
1 关注 分享
c***@yeah.net

要回复文章请先登录注册

乙亥

乙亥

<div id="wo" class="mui-page">
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#mobile">手机号<span id="shouji" class="mui-pull-right">18311111111</span></a>
</li>
</ul></div></div></div></div>
更改手机号mui-page页面
<div id="mobile" class="mui-page">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>更改手机号
</button>
<button id="save" type="submit" class="mui-btn mui-btn-success mui-pull-right" >
保存
</button>
</div>
<div class="mui-input-row">
<input id="sjnum" type="text" style="margin-top: 15px" placeholder="手机号可以让你的朋友更方便联系你">
</div>
</div>

document.getElementById('save').addEventListener('tap',function(){
var input = document.getElementById('sjnum');
var hao = input.value;
var sjhao = document.getElementById('shouji');
// alert(hao);

mui.openWindow({
url: 'wo.html',
id: 'wo',
});
});
求帮忙,这儿输入的值如何传到 <li class="mui-table-view-cell">
<a href="#mobile">手机号<span id="shouji" class="mui-pull-right">18311111111</span></a>
</li>处span下的手机号
2016-11-16 15:00