APP
APP
  • 发布:2014-10-21 16:07
  • 更新:2015-11-30 16:53
  • 阅读:5436

tabbar webview 页面跳转问题

分类:MUI

使用官方的tab webview例子,在选项卡的页面中的子页面中,比如登录成功后需要跳转到上次选中的选项卡,请问如何跳转到上次选中的选项卡页面,并且重新加载数据呢?

目前我的代码是:
首页
<!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" />  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <title></title>  
    <link href="css/mui.css" rel="stylesheet" />  
    <link href="css/config.css" rel="stylesheet" />  
    <link href="css/user-center.css" rel="stylesheet" />  
</head>  

<body>  
    <nav class="mui-bar mui-bar-tab op-90 bg-none bottom_ac">  
        <a class="mui-tab-item mui-active" id="home-home" href="index-list.html">  
            <span class="mui-icon home-home"></span>  
            <span class="mui-tab-label">首页</span>  
        </a>  
        <a class="mui-tab-item" href="broadcast-index.html">  
            <span class="mui-icon home-school"></span>  
            <span class="mui-tab-label">学堂</span>  
        </a>  
        <a class="mui-tab-item" href="service.html">  
            <span class="mui-icon home-service-selected"></span>  
            <span class="mui-tab-label">服务</span>  
        </a>  
        <a class="mui-tab-item" href="merchants.html">  
            <span class="mui-icon home-company"></span>  
            <span class="mui-tab-label">商家</span>  
        </a>  
        <a class="mui-tab-item" id="user-center" href="user-center.html">  
            <span class="mui-icon home-user"></span>  
            <span class="mui-tab-label">个人</span>  
        </a>  
    </nav>  

    <script src="js/mui.min.js"></script>  
    <script type="text/javascript" src="js/script/common.js"></script>  
    <script type="text/javascript" charset="utf-8">  
        var subpages = ['index-list.html', 'broadcast-index.html', 'service.html', 'merchants.html', 'user-center.html'];  
        var subpage_style = {  
            top: '0',  
            bottom: '51px'  
        };  
         //创建子页面,首个选项卡页面显示,其它均隐藏;  
        mui.plusReady(function() {  
            var self = plus.webview.currentWebview();  
            for (var i = 0; i < 5; i++) {  
                var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);  
                    if (i != 0) {  
                        sub.hide();  
                    }  
                self.append(sub);  
            }  
        });  

         //当前激活选项,默认为第一个;  
        var activeTab = subpages[0];  
         //选项卡点击事件  
        mui('.mui-bar-tab').on('tap', 'a', function(e) {  
            var targetTab = this.getAttribute('href');  
            if (targetTab == activeTab) {  
                return;  
            }  

            //先隐藏当前的  
            plus.webview.hide(activeTab);  
            //再显示目标  
            plus.webview.show(targetTab);  
            //更改当前活跃的选项卡  
            activeTab = targetTab;  
        });  
    </script>  
</body>  

</html>

点击“个人”选项卡如果未登录跳转到登录(注册、快速注册、QQ登录、其他登录方式)界面,完成注册、登录界面
登录的页面:
<!DOCTYPE html>
<html>

<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <link href="css/mui.css" rel="stylesheet" />  
    <link href="css/user-center.css" rel="stylesheet" />  
    <link href="css/config.css" rel="stylesheet" />  
</head>  

<body class="login-main">  
    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left co-white"></a>  
        <h1 class="mui-title co-white mui-text-left">用户登陆</h1>  
        <button class="mui-btn mui-btn-link mui-btn-nav mui-pull-right">  
            <a href="register.html?id=1" class="co-white">注册</a>  
        </button>  
    </header>  

    <div style="margin-top: 60px;">  
        <form>  
            <div class="login-input">  
                <input id="userName" type="text" placeholder="请输入账号">  
            </div>  
            <div class="login-input">  
                <input id="password" type="password" class="mui-input-clear half" placeholder="请输入密码">  
                <span class="mui-icon icon-key">密码找回</span>  
            </div>  
            <div class="mui-button-row login-button">  
                <button class="mui-btn btn-unactive" onclick="quickRegister()">快速注册</button>&nbsp;&nbsp;  
                <button class="mui-btn btn-active" id="logonBtn" onclick="return false;">登陆</button>  
            </div>  
        </form>  
    <div class="other-login-line"></div>  
    <div class="other-login-text">或使用以下账户登陆</div>  
    <div class="sn-login">  
        <ul>  
            <li>  
                <img src="images/QQ.png">  
            </li>  
            <li>  
                <img src="images/weibo.png">  
            </li>  
        </ul>  
    </div>  

    </div>  
</body>  
<script type="text/javascript" src="js/script/common.js"></script>  
<script>  
    mui.init();  
     //登录  
    document.body.querySelector("#logonBtn").addEventListener('tap', function() {  
        //执行登录  
        var userName = document.body.querySelector("#userName").value.trim();  
        var password = document.body.querySelector("#password").value.trim();  
        if (userName == "" || password == "") {  
            mui.alert("用户名或密码不能为空");  
        return ;  
        }  

        var storage = window.localStorage;  
        var xhr = new plus.net.XMLHttpRequest();  
        xhr.onreadystatechange = function() {  
            if (xhr.readyState === 4) {  
                if (xhr.status == 200) {  
                    if (xhr.responseText != "") {  
                        console.log(xhr.responseText)  
                        var data = JSON.parse(xhr.responseText);  

                        if (data.stat == "0") {  
                            mui.alert(data.mes);  
                        } else { //登录成功  
                            var user = data.U_user;  
                            storage.setItem("userid", user.userid);  
                            storage.setItem("username", user.username);  
                            storage.setItem("nickname", user.nickname);  
                            storage.setItem("logintime", user.logintime);  
                            storage.setItem("headphoto", user.headphoto);  
                            //跳转到个人中心页面  
                            mui.openWindow("index.html")  
                        }  
                    }  
                }  
            }  
        }  
        xhr.open("GET", '‘);  
        xhr.send();  
    });  
    function quickRegister(){  
        mui.openWindow("register.html?id=2");  
    }  
</script>  

</html>

请问如何实现在登录成功后,跳转到首页,并且选中的选项卡为“个人中心”,并且重新加载个人中心页面呢!谢谢!

2014-10-21 16:07 负责人:无 分享
已邀请:
noprom

noprom

有同样的需求,请官方提供一下解决方案,谢谢。

phoenix_ch

phoenix_ch

有同样的需求,请官方提供一下解决方案,谢谢。

周工

周工

有同样的需求,请官方提供一下解决方案,谢谢。

DCloud_UNI_FXY

DCloud_UNI_FXY

登录成功后,触发tabbar的父页面的选项卡tap事件,可自动切换
fire事件到个人中心页面,通知更新页面

该问题目前已经被锁定, 无法添加新回复