继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

ionic2 导航返回按钮

BIG阳
关注TA
已关注
手记 429
粉丝 70
获赞 457

key: ionic2  navBar 自定义返回按钮
ionic2 修改导航的返回按钮事件,通常有两个方法。

方法一:自定义返回按钮

hideBackButton 影藏导航栏自带的返回按钮;
自定义返回按钮替换即可。

<ion-header>
  <ion-navbar hideBackButton>
    <ion-buttons left>
      <button ion-button (click)="doYourStuff()">
        <ion-icon class="customIcon" name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Page Title</ion-title>
  </ion-navbar></ion-header>doYourStuff()
{
alert('cowabonga');
this.navCtrl.pop();  // remember to put this to add the back button behavior
}
方法二:修改按钮的backButtonClick

@ViewChild(Navbar) navBar: Navbar  获取到navBar
修改navBar的 backButtonClick() 事件

@Component({selector: 'my-page',template: `
<ion-header>
  <ion-navbar>
    <ion-title>
      MyPage
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  ...
</ion-content>
`})   export class MyPage {
  @ViewChild(Navbar) navBar: Navbar;  constructor(private navController: NavController){}
  ionViewDidLoad() {    this.navBar.backButtonClick = (e:UIEvent)=>{      // todo something
      this.navController.pop();
    }
  }
}

当然也可以修改返回按钮的文字等

700

navbar.ts



作者:小木___Boy
链接:https://www.jianshu.com/p/0aef2fefb9e4


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP