ionic3 tabs登录跳转处理

最新推荐文章于 2021-05-28 18:16:51 发布

原创最新推荐文章于 2021-05-28 18:16:51 发布 · 894 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ionic #前端

收录于

ioinc 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Ionic应用中实现登录成功后的个人中心Tab自动切换，并处理未登录状态下Tab切换的逻辑。通过监听Tab选择事件，检查登录状态，未登录时阻止切换并显示登录页面。

1、在Tabspage需要转向登录tab添加事件

<ion-tab tabsHideOnSubPages=“true” [root]=“tab4Root” tabTitle=“会员” tabIcon=“tab-usercenter” (ionSelect)=“changeTabUser()”>

@ViewChild(‘myTabs’) tabRef: Tabs;

constructor(public http:HttpSerProvider,
public modalCtrl:ModalController,
public params:NavParams) {

this.lgSuccess=params.get("lgSuccess");

}

ionViewDidLoad() {

//登录成功跳转个人中心
if(this.lgSuccess=="1"){

  this.tabRef.select(3);

}

}

changeTabUser(){

if(!this.http.isLogin()){

  this.tabRef.select(this.tabIndex);  //切换之前所在的tab
  console.log("no login");
  let modal = this.modalCtrl.create('LoginPage');
  modal.present();
}

}

2、登录成功后处理

self.http.toast("登录成功",function () {

        self.viewCtrl.dismiss(false);

        self.appCtrl.getRootNavs()[0].push(TabsPage,{"lgSuccess":"1"});

      });