当前位置: 首页 > 工具软件 > nav-nuderline > 使用案例 >

关于ionic ion-nav-back-button 标题隐藏及修改

燕禄
2023-12-01

关于ionic ion-nav-back-button 标题隐藏及修改

最近在做ionic APP开发,遇到一些问题,其中就是关于ion-nav-back-button文字的隐藏修改,做个记录,方便以后查阅。

ion-nav-back-button在一个 ionNavBar中创建一个按钮。当用户在当前导航堆栈能够后退时,将显示后退按钮。

用法

默认用法

<ion-nav-bar>
      <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-c"></i> 返回
      </ion-nav-back-button>
</ion-nav-bar>

<!-- 或者这样写也可以 需要自己添加点击动作-->
<ion-nav-buttons side="left">
     <button class="button button-icon" ng-click="goback()">
          <i class="icon ion-ios-arrow-back"></i>
      </button>
</ion-nav-buttons>

使用ion-nav-back-button 点击事件用$ionicNavBarDelegate ,具体使用方法详见官方文档[http://www.ionic.wang/js_doc-index-id-19.html].

想要直接隐藏不显示文字代码如下:

app.config(function ($stateProvider,$ionicConfigProvider) {

    //隐藏ion-nav-back-button文字
    $ionicConfigProvider.backButton.text("");
    $ionicConfigProvider.backButton.previousTitleText(false);

    $stateProvider
        .state("home",{
            templateUrl:"home.html"
        })
       .state("music",{
            templateUrl:"music.html"
       });
    });

更多ion-nav-back-button用法参考 [http://www.ionic.wang/js_doc-index-id-17.html].

 类似资料: