首页/Ionic/列表

ionic/ionic2/ionic3进入子页面后隐藏底部tabs导航方法总结

来源:  2018-04-13 08:55:20    评论:0点击:

我们在设计app的时候,很多时候跳转到详情页面是去掉底部的tab切换导航条的,ionic2或者ionic3中如何去掉呢?


要想在ionic2/ionic3子页面隐藏或者去掉底部tabs导航其实非常简单。


在ionic2 或者ionic3的app.module.ts中设置如下代码

 IonicModule.forRoot(MyApp,{
     tabsHideOnSubPages: 'true',         //ionic3隐藏全部子页面tabs
      mode: 'ios'          //把所有平台设置为iOS风格:

    })



看了几天ionic3 问题还挺多的,今天想把所有子页面tabs 给去掉,整了半天,发现app.Module 是可以配置的 修改 IonicModule.forRoot(MyApp)
 
    
imports: [
    BrowserModule,
    // IonicModule.forRoot(MyApp),
    HttpModule,
      IonicModule.forRoot(MyApp,{
          tabsHideOnSubPages: 'true' ,       //隐藏全部子页面tabs
          iconMode: 'ios',
          mode: 'ios',
          modalEnter: 'modal-slide-in',
          modalLeave: 'modal-slide-out',
      }),
      // SuperTabsModule.forRoot(),
      // IonicStorageModule.forRoot(),//就这里
  ],




ionic2 中隐藏子页面tabs选项卡的三种方法





第一种: 隐藏全部子页面的tabs选项界面

  找到app.module.ts文件 ,修改如下代码

imports: [
    IonicModule.forRoot(MyApp,{
      tabsHideOnSubPages: 'true'         //隐藏全部子页面tabs
    })
  ],

 

第二种:隐藏某个子页面的tabs ;   缺点:当子页面使用pop()方法退出时,父页面的任何事件都不响应。
      
import{ App } from 'ionic-angular';          //1.引入App类
constructor(privateapp:App) {}                 //2.声明初始化app对象
this.app.getRootNav().push(nextPage);      //3.调用this.app.getRootNav() 从根页面跳转就可以了

  

第三种:隐藏某个子页面的tabs;   缺点:暂无
    
//当页面进入初始化的时候
    letelements = document.querySelectorAll(".tabbar");
    if(elements != null) {
        Object.keys(elements).map((key) => {
            elements[key].style.display ='none';
        });
    }   
 
 
  //当退出页面的时候
ionViewWillLeave() {
    letelements = document.querySelectorAll(".tabbar");
    if(elements != null) {
        Object.keys(elements).map((key) => {
            elements[key].style.display ='flex';
        });
    }
}   



ionic 进入二级目录以后隐藏底部导航栏(tabs)

1.在标签ion-tabs中添加:ng-class=”{‘tabs-item-hide’: $root.hideTabs}”,源码如下:
 
<ion-tabs class="tabs-icon-top" ng-class="{'tabs-item-hide': $root.hideTabs}">
 
//tabs
 
</ion-tabs>

2.添加angularjs的指令,源码如下:
 
//app已经在其他文件中指定,如var app = angular.module("starter",["ionic"])
app.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {
            scope.$on('$ionicView.beforeEnter', function() {
                scope.$watch(attributes.hideTabs, function(value){
                    $rootScope.hideTabs = value;
                });
            });
 
            scope.$on('$ionicView.beforeLeave', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
});

3.三你想要隐藏的界面标签 ion-view添加表达式hide-tabs=”true”,源码如下:
 
    
//这是官网模板中的文件
<ion-view hide-tabs="true" view-title="{{chat.name}}">
 
  <ion-content class="padding">
 
    <img ng-src="{{chat.face}}" style="width: 64px; height: 64px">
    <p>
      {{chat.lastText}}
    </p>
  </ion-content>
</ion-view>

现在体验下效果吧!
另外,如果要把效果搞得好看点,没有什么延迟现象,需要改动ionic.css文件,改动他需要用scss,这些内容前面也有介绍,改动地方如下:
 
    
.tabs {
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
}
 
.tabs-item-hide > .tabs{
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
  bottom: -$tabs-height;
  display: flex;
}

上面内容在tabs.scss文件中!



来源:https://www.cnblogs.com/crazycode2/p/6845275.html

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权