Ionic2自定義遮罩層和相關注意事項
阿新 • • 發佈:2019-02-05
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='';
}
}