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

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

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

网上查到了隐藏底部tab栏的三种方法/终极方法等等，但仍然做不到随意的隐藏和显示，这时跟我搭配的后端小伙，嗑着瓜子看了几眼ionic官网，油腻的胖手指着Modals说：你用这个试试，稍微改装一下，应该能用。

当时我已经在这个点卡了两小时（我是渣渣怪我咯）

然后试了一下ionic的Modals，居然可以自由隐藏和显示了！

废话不多说上代码：

一、这是ionic
4000
官网上关于Modals的教程：

http://ionicframework.com/docs/components/#menus

很详细，聪明的大伙儿肯定一看就懂。



二、我要在Module.ts这个二级子页面调用PIN组件，并隐藏tab栏，达到该应用的“锁屏”的效果。

1.把PIN组件和Modals import进来，Modals需要声明处理依赖。





2、使用Modals的方法。

这里要说到Modals 的

create方法

要传的三个参数

(component, data, opts)，三个都是object类型

component是你跳转后要展示的视图对象；data是跳转时要携带过去的参数，可随意根据自己的需要设置；opts有个三个属性showBackdrop　是否显示遮罩层，默认true；enableBackdropDismiss　点遮罩层任意地方是否能退出或返回，默认true；cssClass　自定义样式。

我这里按照自己的需要设置了false，三个属性不是必须，可随意根据自己的需要设置。



      ３.在需要触发的地方调用。　

       


４.效果图



PS:如果要传参数，那么用自带的NavParams 就可以获取，只有定个key就行了，举例如下：

红线划的就是我设置的key：



取参数。先声明一个变量和NavParams，然后如下即可： 



５、关闭Modals（此部分代码在PIN.ts文件）

当用户输入ＰＩＮ码正确之后，ＰＩＮ组件消失，展示之前的页面。

引入、声明（依赖处理）：





这时候在键盘打钩按钮的点击事件里写如下代码：



        6、黑PIN消失，显示之前停留的界面；

 


第一次分享这种小tips，有错漏的地方请大家不吝指出，谢谢


          转载请@作者