ionic3隐藏子页面的tabs

最新推荐文章于 2022-12-21 12:18:48 发布
最新推荐文章于 2022-12-21 12:18:48 发布
阅读量637 收藏
点赞数
分类专栏： ionic3学习 文章标签： ionic3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17759721/article/details/80668532
版权 
 

修改App.module.ts
 

imports: [   BrowserModule,   IonicModule.forRoot(MyApp,{     tabsHideOnSubPages: 'true' ,      //隐藏全部子页面tabs     iconMode: 'ios',     mode: 'ios',     modalEnter: 'modal-slide-in',     modalLeave: 'modal-slide-out',   }) ],

                

        

        

    




    

      

        

            

              
                
                  LEAUQEAAN
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
Ionic - 笔记 之 Tab

				
			

			

				

					LucioCN
				

				

					06-19
					
					1334
					
				

			

		

		

			
				
Ionic2 组件之Tab

学了Tabs更少不了Tab组件，Tab组件写作<ion-tab>,必须要放置在Tabs组件内，是NavController的一种。

基本用法

Tab有以下几个基本属性和事件:

Attr
			Type
			Desc
		[root]
			Page
			指定tab希望加载的页面
		tabTitle
			string
			tab上显示的标题
...

			
		

	



                

              
                



	

		

			

				
					
ionic 三级页面tabs隐藏的写法

				
			

			

				

					qy492019878的博客
				

				

					01-05
					
					2158
					
				

			

		

		

			
				
最近从ios转来做使用ionic框架开发的混合型app 碰到个问题就是关于tabs的三级页面不能隐藏的情况，
开始时我是这么写的：
//这样只能隐藏二级页面

.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, e

			
		

	



                


  
              

                


	

		

			

				
					
ionic中隐藏tabs(tabs-item-hide)

				
			

			

				

					柯思铭的博客
				

				

					08-14
					
					5238
					
				

			

		

		

			
				
1.tabs页面



...



2.跳转后页面




..



3. 指令

.directive('hideTabs',function($rootScope){

    return {

        restrict:'AE',


        link:function($scope){

            

			
		

	





	

		

			

				
					
Ionic3隐藏tab的方法

				
			

			

				

					qq_32262049的博客
				

				

					07-08
					
					716
					
				

			

		

		

			
				
解决方法：
    1.在需要跳转的页面隐藏App类
import {App} from 'ionic-angular';
2.声明初始化的app对象
constructor(private app:App) {}
3.调用this.app.getRootNav() 从根页面跳转就可以了

			
		

	



		

			
		



	

		

			

				
					
ionic 隐藏ion-tab

				
			

			

				

					TryCatch
				

				

					01-04
					
					2377
					
				

			

		

		

			
				
需要实现对不同的人看到不同的tab，所以出现这个问题,有两种解决办法 
1.第一种先把所有选项卡显示出来，在通过数据判断隐藏一个$scope.is_agent_doctor = true;//注意这里必须先让他设置为true，不然顺序会变function(){    //可以在这里设置网络请求
    $scope.is_agent_doctor = value;
}
<ion-tabs class

			
		

	





	

		

			

				
					
ionic隐藏tabs的方法

				
			

			

				

					09-01
				

			

		

		

			
				
总结来说，隐藏 Ionic 中的 `ion-tabs` 主要涉及以下几个步骤： 1. 使用 `ng-class` 结合 `$root.hideTabs` 控制 CSS 类。 2. 创建 `showTabs` 和 `hideTabs` 自定义指令来切换 `$root.hideTabs` 的值。 3. 在页面...

			
		

	





	

		

			

				
					
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案

				
			

			

				

					10-21
				

			

		

		

			
				
在构建Ionic应用时，我们经常遇到需要在特定页面或多级目录中隐藏底部导航栏（tabs）的需求。这是因为底部导航栏通常用于展示主要的页面，而在深入的子页面中，这些导航元素可能不再适用或者会干扰用户体验。本文将...

			
		

	





	

		

			

				
					
关注Ionic底部导航按钮tabs在android情况下浮在上面的处理

				
			

			

				

					08-31
				

			

		

		

			
				
在使用Ionic进行移动端应用开发时，开发者可能会遇到一个常见的问题，即在Android设备上，底部导航按钮（tabs）会浮到页面内容之上，这与iOS设备上的表现不同。这种现象主要是由于不同平台间的样式和布局差异造成的...

			
		

	





	

		

			

				
					
04 ionic新增tab切换页面 去掉二级页面tabs菜单，修改返回按钮-avi.rar

				
			

			

				

					04-09
				

			

		

		

			
				
通过以上步骤，你将能够在 Ionic 应用中实现自定义的 tab 导航，隐藏二级页面的 tabs 菜单以及修改返回按钮的行为。这有助于提升用户体验，使应用程序更符合用户的交互预期。请确保根据实际项目需求进行适当的调整和...

			
		

	





	

		

			

				
					
ionic3+angular4制作的登录注销页

				
			

			

				

					10-14
				

			

		

		

			
				
为了实现tabs栏的显示或隐藏，我们可以使用Ionic3的`NavController`和` NavParams`服务。在`app.component.ts`中，我们可以根据用户是否已登录来决定是否显示tabs。例如，当用户未登录时，tabs可以被隐藏；登录后，...

			
		

	





	

		

			

				
					
ionic3官网demo-tabs

				
			

			

				

					04-19
				

			

		

		

			
				
由于国内下载ionic3资源有时候会有错误产生，所以准备一份已经下载好的demo提供给大家下载！

			
		

	





	

		

			

				
					
ionic3在首页与子页面同使用tabs

				
			

			

				

					群来群往的博客
				

				

					05-27
					
					1192
					
				

			

		

		

			
				
ionic3在首页与子页面同使用tabsimport { App } from 'ionic-angular'; 请勿使用this.navCtrl.push(nextPage);或者在app.module.ts设置tabsHideOnSubPages需要先获取root页面，从root页面进行跳转即可：this.app.getRootNav().push(tabsPage);转自：https://w...

			
		

	





	

		

			

				
					
ionic3 动态设置tabs页面底部导航栏隐藏，并显示输入框添加评论

				
			

			

				

					weixin_30510153的博客
				

				

					12-30
					
					101
					
				

			

		

		

			
				
1、先上原始效果图：                    2、完成后效果
              
2、实现思路：
　　ionic3 的底部栏是隐藏在 div.tabbar.show-tabbar 标签内的，我们可以通过控制器看到。本文实现思路即是通过js动态的控制div.tabbar.show-tabbar 元...

			
		

	





	

		

			

				
					
ionic3顶部tabs点击切换功能

				
			

			

				

					qq_37705048的博客
				

				

					02-20
					
					1099
					
				

			

		

		

			
				
1、新建项目,ionic start demo tabs ,选择在Home页面做这个功能
2、在home.html页面：
&amp;lt;ion-header&amp;gt;
  &amp;lt;ion-navbar&amp;gt;
    &amp;lt;ion-title&amp;gt;Home&amp;lt;/ion-title&amp;gt;
  &amp;lt;/ion-navbar&amp;gt;
&amp;

			
		

	





	

		

			

				
					
ionic关于隐藏底部tabs终极解决方案

				
			

			

				

					Sapphire521的博客
				

				

					12-21
					
					567
					
				

			

		

		

			
				
网上看到很多都是写个指令，监听view进出对tab进行显示隐藏，试过挺多个，自己写了一个，都不是太让人满意，问题大多数为：

1、二级页面是隐藏了tab，但是进去三级视图发现tab又出来了

2、三级，四级view隐藏了tab，但是返回键的时候tab一秒后又跑了出来

参考国外资料，如果只要在首页的几个页面中显示tab，其他页面不显示，建议用下面的方式，很好用，直观，明了

控制器里面写

.controller('TabsCtrl', function($scope, $rootScope, $state

			
		

	





	

		

			

				
					
ionic2/3 tabs控件

				
			

			

				

					Hello World ！！
				

				

					08-24
					
					1152
					
				

			

		

		

			
				
由于第一次使用，tabs 使用中坑不少，一点一点积累把：


1、tab页中跳转其他页面，隐藏下面tab栏：
    app.module.ts中：imports：【】中：
   IonicModule.forRoot(MyApp,{
      tabsHideOnSubPages: 'true' //隐藏全部子页面tabs
    }),

2、tab栏中如果需要点击tab中一个

			
		

	





	

		

			

				
					
ionic：tabs在子页面中隐藏（终极武器）

				
			

			

				

					Mandy112的博客
				

				

					03-15
					
					451
					
				

			

		

		

			
				
问题描述：ionic4中tabs在进入二级页面时并不会隐藏，但我们往往需要其隐藏掉。
思路：在试水百度的各种方法后，仍不见效，就有了以下的思路
tabs在子页面的时候隐藏，那么子页面由路由进入后，地址url改变了，这可以用来区分是子页面还是tabs页面。根据页面，设置tab是否显示，display：none即可
方法1：在子页面对tabs进行style设置
方法2：在tabs页面对tabs根据ur...

			
		

	





	

		

			

				
					
ionic4——隐藏

				
			

			

				

					张文慧 期待每一天更好的自己
				

				

					06-06
					
					761
					
				

			

		

		

			
				
首先，写两个div和id



在ts写以下代码



具体代码


      <div id="beforeA">
        <ion-list lines="full" class="mylist">
          <!-- 获得姓名 -->
          <ion-item-sliding *ngFor="let item of...

			
		

	





	

		

			

				
					
ionic2/ionic3自由隐藏底部tab栏---让ionic3自己解决！手把手教程

				
			

			

				

					沛雯的博客
				

				

					11-28
					
					5105
					
				

			

		

		

			
				
最近用ionic3和angular4做APP，其中有个需求：用户无论在哪个页面只要超时了就弹界面要求用户输入PIN码。这时候必须是覆盖整个页面，除非PIN码正确否则其他内容都是disable的。（jq的方法在本文讨论之外）

写好了密码组件，发现弹框的时候底部的tab栏依然存在。。。

网上查到了隐藏底部tab栏的三种方法/终极方法等等，但仍然做不到随意的隐藏和显示，

这时跟我搭配的

			
		

	





	

		

			

				
					
ionic改变tabs图标背景颜色

					
最新发布

				
			

			

				

					06-09
				

			

		

		

			
				
要改变Ionic Tabs组件的图标背景颜色，可以使用CSS伪类选择器来修改样式。下面是实现的步骤：  1. 在全局样式表中定义伪类选择器。  ```css ion-tab-button::part(icon) {  background-color: #FF6347; /* 背景颜色 ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值