ionic2\ionic3 自定義彈窗

時間 2019-12-06

標籤 ionic2 ionic ionic3 自定義简体版

原文原文鏈接

ionic2及ionic3沒有了popup及其templateUrl屬性那咱們如何對彈窗里加入自定義元素從而達到自定義彈窗樣式

那麼就能夠經過寫h5頁面來實現自定義彈窗效果；javascript

寫個H5的彈窗及控制其顯示、隱藏，再加上animation就完美應用了；css

！！！！java

但有個新的問題，從底部彈出的窗口h5元素不管怎麼設置z-index始終沒法蓋住tabs欄；bootstrap

以下解決：瀏覽器

1.若是隻是子頁面有自定義彈窗：app

全部子頁面隱藏tabs就能夠解決；ionic

能夠經過在app.module.ts 寫入以下：ide

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 ：flex

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