使用官方的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>
<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>
请问如何实现在登录成功后,跳转到首页,并且选中的选项卡为“个人中心”,并且重新加载个人中心页面呢!谢谢!
4 个回复
noprom
有同样的需求,请官方提供一下解决方案,谢谢。
phoenix_ch
有同样的需求,请官方提供一下解决方案,谢谢。
周工
有同样的需求,请官方提供一下解决方案,谢谢。
DCloud_UNI_FXY
登录成功后,触发tabbar的父页面的选项卡tap事件,可自动切换
fire事件到个人中心页面,通知更新页面