时间:2021-05-28
项目要实现一个功能,在首页底部中间的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弹出框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Ionic是一款流行的移动端开发框架,但是刚入门的同学会发现,Ionic在iOS和Android的底部tabs显示不一样。在安卓情况下底部tabs会浮上去。如下
一.结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的
bootstrap下的弹出框加载select2框架失败的解决方案如下所示:$("#modal").on("shown.bs.modal",function(){
分享VS2017CordovaIonic2移动开发环境搭建教程1.文档概述本文档用于说明VisualStudio2017下使用Ionic2进行跨平台开发的运行环
整理自慕课笔记插件的源文件:modal.js。在Bootstrap框架中把模态弹出框统一称为Modal。这种弹出框效果在大多数Web网站的交互中都可见。比如点击