脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → ionic tabs 底部弹出框

ionic2 tabs使用 Modal底部tab弹出框

 更新时间：2016年12月30日 15:00:35   作者：兰色的fire  
最近做了一个项目，其中要实现这样的功能，在首页底部中间的tab弹出一个页面，而且是没有底部栏的，而不是像平常滑动的一个子页面。其实实现方法很简单，下面通过本文给大家介绍下

 项目要实现一个功能，在首页底部中间的tab弹出一个页面，而且是没有底部栏的，而不是像平常滑动的一个子页面。

像这样：

做法其实很简单

1.修改tabs.html中的tab，去掉[root]="tab2root"属性，就不会显示子页面了

2.添加(ionSelect)方法，点击这个tab按钮的事件，用来显示你的弹出modal

去掉之前：

<ion-tab [root]="tab5Root" tabIcon="call" (ionSelect)="call()" ></ion-tab>

去掉之后：

<ion-tab  tabIcon="call" (ionSelect)="call()" ></ion-tab>

3.在tabs.ts中显示实现(ionSelect)方法的call()方法，以显示modal

引入ModalController

import { NavController, NavParams,ModalController,ViewController,Tabs } from 'ionic-angular';

声明ModalController

constructor(public navCtrl: NavController, public navParams: NavParams,<span style="color:#ff0000;">public modalCtrl: ModalController,</span>public viewCtrl: ViewController) { 
 }

实现call方法

call(){ 
 let modal = this.modalCtrl.create(CallModalPage); 
 modal.present(); 
}

以上所述是小编给大家介绍的ionic2 tabs使用 Modal底部tab弹出框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • js控制框架刷新

    js控制框架刷新

    一句话控制框架的刷新
    2008-08-08
  • JavaScript装饰器函数(Decorator)实例详解

    JavaScript装饰器函数(Decorator)实例详解

    这篇文章主要介绍了JavaScript装饰器函数(Decorator),结合实例形式分析了JavaScript装饰器函数(Decorator)的功能、实现与使用方法,需要的朋友可以参考下
    2017-03-03
  • 详解JavaScript中typeof与instanceof用法

    详解JavaScript中typeof与instanceof用法

    typeof用以获取一个变量或者表达式的类型而instanceof用于判断一个变量是否某个对象的实例，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-10-10
  • 用于CSS代码压缩与格式化的javascript函数代码

    用于CSS代码压缩与格式化的javascript函数代码

    呵呵，发现只要几行ＪＳ代码就可实现css的压缩与格式化，非常不错。
    2009-12-12
  • BootStrap实现轮播图效果(收藏)

    BootStrap实现轮播图效果(收藏)

    这篇文章主要介绍了BootStrap实现轮播图效果,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-12-12
  • JS异步编程方法的6种方案总结

    JS异步编程方法的6种方案总结

    异步是指进程不需要一直等下去,而是继续执行下面的操作,不用管其他进程的状态,下面这篇文章主要给大家介绍了关于JS异步编程方法的6种方案,需要的朋友可以参考下
    2023-01-01
  • 如何利用js实时监听input输入框值的变化

    如何利用js实时监听input输入框值的变化

    在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感,这篇文章主要给大家介绍了关于如何利用js实时监听input输入框值的变化,需要的朋友可以参考下
    2024-02-02
  • JavaScript实现点击图片换背景

    JavaScript实现点击图片换背景

    这篇文章主要为大家详细介绍了JavaScript实现点击图片换背景，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • js 将json字符串转换为json对象的方法解析

    js 将json字符串转换为json对象的方法解析

    将json字符串转换为json对象的方法。在数据传输过程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键
    2013-11-11
  • 使用JS前端技术实现静态图片局部流动效果

    使用JS前端技术实现静态图片局部流动效果

    本文使用前端开发技术，结合 SVG 和 CSS 来实现类似的液化流动效果，包含的知识点主要包括：mask-image 遮罩、feTurbulence 和 feDisplacementMap 滤镜、filter 属性、canvas 绘制方法、TimelineMax 动画及input[type=file] 本地图片资源加载，需要的朋友可以参考下
    2022-08-08

最新评论