Ionic2自定义遮罩层和相关注意事项

1、自定义遮罩层步骤

1.1先创建一个展示框，在遮罩层之上

<div class="aboutPage-isShowDiv" *ngIf="isShow">
    <h1>放内容h1>        
div>

1.2根据alert或者其他组件的样式，抽取ion-backdrop标签出来使用

<div *ngIf="isShow" class="backdrop-div" (click)="backdropclick($event)" ontouchmove="event.preventDefault();event.stopPropagation();">
    <ion-backdrop disable-activated role="presentation" tappable style="opacity: 0.5; transition-delay: initial; transition-property: none;">ion-backdrop>
div>

并为组件添加点击事件（阻止冒泡）

//遮挡层点击事件
    backdropclick(e){
        //判断点击的是否为遮罩层，是的话隐藏遮罩层
        if(e.srcElement.className != 'itemClass'){
            this.isShow = false;
        }
        //隐藏滚动条
        this.hiddenscroll();
        e.stopPropagation();
    }

并为遮罩层添加触摸事件（阻止冒泡、阻止默认事件 ontouchmove=”event.preventDefault();event.stopPropagation();”）

到此，就完成了Ionic2自定义的遮罩层

2.注意事项

2.1在ios手机上遮罩层能滑动

解决方法：为遮罩层添加触摸事件，阻止默认事件，阻止冒泡，另外如果样式有些出入的话，还需要微调一下。

2.2ios上弹出框上有滑动的列表的话，也会带动底层的列表滑动

解决方法： 除了给遮罩层添加触摸事件外，还需在弹出框展示的时候隐藏滚动条（设置overflow=’hidden’），恢复时恢复滚动条即可

<ion-content id="aboutContent">
ion-content>

//弹出下拉框时，取消scroll
hiddenscroll(){
    //获取当前组件的ID
    let aboutContent = document.querySelector("#aboutContent");
    //获取当前组件下的scroll-content元素
    let scroll:any = aboutContent.querySelector(".scroll-content");
    if(this.isShow){
        scroll.style.overflow='hidden';
    }else {
        scroll.style.overflow='';
    }
}