ionic2及ionic3没有了popup及 其templateUrl属性 那我们如何对弹窗里加入自定义元素 从而达到自定义弹窗样式
那么就可以通过写h5页面来实现 自定义弹窗效果；
写个H5的弹窗及控制其显示、隐藏，再加上animation就完美应用了；
！！！！
但有个新的问题，从底部弹出的窗口h5元素无论怎么设置z-index始终无法盖住tabs栏；
如下解决：
1.如果只是子页面有自定义弹窗：
所有子页面隐藏tabs就可以解决；
可以通过在app.module.ts 写入如下：
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MyApp } from './app.component';
@NgModule({
declarations: [
MyApp
],
imports: [
BrowserModule,
BrowserAnimationsModule, //..引入animation动画模块
HttpModule,
IonicModule.forRoot(MyApp,{
tabsHideOnSubPages:'true' //,,所有子页面tabs隐藏(一般app都做了)
})
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler,useClass: IonicErrorHandler},HttpServer
]
})
export class AppModule {}
2.如果几个tabsRoot页面同样有自定义的H5弹窗：
那么就只有手动隐藏、显示（毕竟弹窗关闭后tabs需要显示）tabs ：
i、自定义tabs显示、隐藏的服务
项目根目录下 新建自定义服务文件夹providers并
provides文件夹下新建tabs-servers.ts：
内容如下：
import {Injectable} from '@angular/core';
// Declare TabsService as a provider in app.module.ts
// Inject TabsService in your class: constructor(public tabs: TabsService){}
// Use the this.tabs.hide() or this.tabs.show() methods wherever you want
@Injectable()
export class TabsServer { //该服务类名TabsServer
constructor() {}
public hide() { //隐藏tabs的方法（函数）
let tabs = document.querySelectorAll('.tabbar'); //选择所有的.tabbar并赋给tabs
let footer = document.querySelectorAll('.footer');
let scrollContent = document.querySelectorAll('.scroll-content');
if (tabs !== null) { //当tabs存在时，如隐藏了tabs就===null
Object.keys(tabs).map((key) => {
tabs[key].style.display = 'none'; //隐藏tabs 这时就是null~~~
});
// fix for removing the margin if you got scorllable content
setTimeout(() =>{
Object.keys(scrollContent).map((key) => {
scrollContent[key].style.marginBottom = '0'; //使content默认marginBoottom清零
});
Object.keys(footer).map((key) => {
footer[key].style.bottom = '0px'; //使footer默认bootom清零
});
},10) //10毫秒后运行
}
}
public show() {
let tabs = document.querySelectorAll('.tabbar');
let footer = document.querySelectorAll('.footer');
let scrollContent = document.querySelectorAll('.scroll-content');
if (tabs !== null) {
Object.keys(tabs).map((key) => {
tabs[key].style.display = 'flex'; //显示tabs
});
}
// fix for removing the margin if you got scorllable content
setTimeout(() =>{
Object.keys(scrollContent).map((key) => {
scrollContent[key].style.marginBottom = '43px';//根据定义的tabs高度来定 (我有在app.scss自定义tabs的高度)
});
Object.keys(footer).map((key) => {
footer[key].style.bottom = '43px';//根据定义的tabs高度来定 (我有在app.scss自定义tabs的高度，未定义的可以浏览器查看)
});
},10)
}
}
ii、将TabsServer载入到app.module.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MyApp } from './app.component';
import {TabsServer} from '../providers/tabs-server'; //导入TabsServer
@NgModule({
declarations: [
MyApp
],
imports: [
BrowserModule,
BrowserAnimationsModule, //..引入animation动画模块
HttpModule,
IonicModule.forRoot(MyApp,{
tabsHideOnSubPages:'true' //,,所有子页面tabs隐藏(一般app都做了)
})
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler,useClass: IonicErrorHandler},HttpServer,TabsServer //写到这儿
]
})
export class AppModule {}
iii、在Home页面实现自定义弹窗
import { Component} from '@angular/core';
import {TabsServer} from '../../providers/tabs-server';
@Component({
selector: 'page-home',
template: `
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content >
我是content,我要显示这个自定义的弹窗
<button ion-button full (click)="showMypopup('1')">显示自定义弹窗<button>
</ion-content>
<!--myPopup1-->
<!--我的遮罩层1-->
<span *ngIf="showBackdrop1" class="backdropBar">
<ion-backdrop disable-activated role="presentation" (click)="backdrop('1')" ></ion-backdrop>
<div class="MyPopup">
<!--弹窗内容-->
<!--close 关闭弹出层 关闭按钮自定义-->
<div class="CloseBox">
<ul class="relate">
<li class="garden">
<span class="close" (click)="closeTap('1')"></span>
</li>
</ul>
</div>
<ion-scroll scrollY="true" class="popContent">
<!--content--说明：用scrol 可以向里面添加无限内容-->
<div >只想在弹窗窗口添加列表信息！</div>
<div >只想在弹窗窗口添加列表信息！</div>
<div >只想在弹窗窗口添加列表信息！</div>
<div >只想在弹窗窗口添加列表信息！</div>
<!--content===end-->
</ion-scroll>
</div>
</span>
<!--myPopup1======end-->
`
})
export class HomePage {
private showBackdrop1:boolean=false;//声明显、隐弹窗判断，初始隐藏弹窗
private showBackdrop2:boolean=false;//声明显、隐弹窗判断，初始隐藏弹窗
constructor(public:tabsserver:TabsServe){} //注入依赖TabsServer
//显示蒙版===打开弹窗==
showMypopup(L){
this.tabsserver.hide(); //隐藏tabs
switch(L){
case '1':{
this.showBackdrop1=true; //显示蒙版1
break;
}
case '2':{
this.showBackdrop2=true; //显示蒙版2
break;
}
//....扩展多个自定义弹窗
}
//显示蒙版===end==
//关闭蒙版--关闭弹窗
backdrop(n){
this.tabsserver.show(); //显示tabs
switch(n){
case '1':{
this.showBackdrop1=false; //隐藏蒙版1
break;
}
case '2':{
this.showBackdrop2=false; //隐藏蒙版2
break;
}
//....扩展多个自定义弹窗
}
}
closeTap(m){
this.backdrop(m);
if(m=="1"){
//..更多的判断
console.log('弹窗1关闭了');
}
}
//关闭蒙版====end=====
}
vi:在home.scss写自定义弹窗样式
page-home{
ion-content{
//蒙版
.backdropBar{
position:fixed;
width:100%;
height:100%;
z-index:8000;
ion-backdrop{
opacity:1.0;
background-color:rgba(0,0,0,0.56);
z-index: 8001;
}
//Mypopup
.MyPopup{
position: absolute;
color: $clr666;
bottom: 0;
left: 0;
width:100%;
height:84%;
background-color:$clrPopBC;
z-index: 8002;
//弹窗内容
//scrooll-content
.popContent{
width:100%;
min-height:100%;
}
//close
.CloseBox{
position:relative;
width:100%;
height:25px;
top:0;
left:0;
z-index: 8003;
.relate{
position:absolute;
width:50px;
height:50px;
left:50%;
top:0;
margin-top:-25px;
margin-left:-25px;
z-index: 8003;
background-color:$clrPopBC;
border-radius: 50%;
padding:8px;
.garden{
float: left;
position:relative;
top:0;
left:0;
width:34px;
height:34px;
border-radius: 50%;
background-color:$clrf00;
line-height: 34px;
overflow: hidden;
.close{
display: block;
position:absolute;
left:0;
top:0;
width:34px;
height:34px;
padding:10%;
&::before{
content:"";
position:absolute;
top:50%;
left:15%;
width:70%;
height:0px;
margin:auto;
border-bottom: 2px solid $clrfff;
transform: rotate(45deg);
}
&::after{
content:"";
position:absolute;
top:50%;
left:15%;
width:70%;
height:0px;
margin:auto;
border-bottom: 2px solid $clrfff;
transform: rotate(-45deg);
}
}
//close==end=
}
//garden==end=
}
//relate==emd=
}
//CloseBox===end===
}
}
}
}
这样就ok了！
总结：
虽然我写的是弹窗，其实是自定义的页面内的底部弹出层\页面+蒙版（没加动画），不过可以看出其实ionic2\ionic3在写法上是相当的便利；通过以上方法可实现意想不到地页面组合效果。