美文网首页
ionic刷新后无法返回到首页

ionic刷新后无法返回到首页

作者: ETXIN | 来源:发表于2018-06-15 17:59 被阅读0次

    通过 navPush 进入到子页面后,如果刷新页面的话,会出现没有后退按钮,且没有tabs的情况,此时用户可能无法切换到其他页面。
    一般情况下是设置页面的 defaultHistory,使其有上级页面,就会显示后退按钮。
    在某些情况下,页面的 defaultHistory 无法确定时,我们可以将 ion-navbarback-button 设为始终显示(通过css实现)。

    .toolbar {
      .back-button {
        display: inline-block;
      }  
    }
    

    这时点击返回按钮,ionic会因为没有定义 defaultHistory 而无法返回,并且抛出异常。需要将源码中返回事件进行修改。

    源码:https://github.com/ionic-team/ionic/blob/v3/src/components/toolbar/navbar.ts

    backButtonClick(ev: UIEvent) {
      ev.preventDefault();
      ev.stopPropagation();
    
      this.navCtrl && this.navCtrl.pop(null, null);
    }
    

    修改判断逻辑为:可以返回时,执行pop返回上一页;无法返回时,执行popToRoot返回根页面。

    backButtonClick(ev: UIEvent) {
      ev.preventDefault();
      ev.stopPropagation();
    
      if (this.navCtrl) {
        if (this.navCtrl.canGoBack()) {
          this.navCtrl.pop();
        }
        else {
          this.navCtrl.goToRoot({});
        }
      }
    }
    

    如果页面在tab中,则会返回tab对应的根页面。

    相关文章

      网友评论

          本文标题:ionic刷新后无法返回到首页

          本文链接:https://www.haomeiwen.com/subject/jkbmeftx.html