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在寫法上是相當的便利；通過以上方法可實現意想不到地頁面組合效果。