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=''; } }