ionic3返回按钮样式改动

ionic3返回按钮样式改动

在app.moudel.ts内部修改

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    MinePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
      HttpModule,
    IonicModule.forRoot(MyApp,{
    backButtonText: '',//按钮内容
    backButtonIcon: 'arrow-dropleft-circle',//按钮图标样式
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    MinePage,
    TabsPage
  ],
  providers: [
    AppConfig,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

在IonicModule.forRoot（）下添加参数

在改动页面添加html代码

<ion-header>

  <ion-toolbar>
    <button ion-button clear small navPop style="padding: 0;">
      <img class="back-btn" src="assets/image/back.png" />
    </button>
    <ion-title>标题</ion-title>
  </ion-toolbar>

</ion-header>

添加navPop属性

禁用返回按钮方法

<ion-header>
  <ion-navbar>
    <ion-navbar hideBackButton="true">
    <ion-title>标题</ion-title>
    </ion-navbar>
  </ion-navbar>
</ion-header>

在中添加属性hideBackButton=”true”