SNS项目笔记<三>--fab与遮罩

<b>在项目界面搭建过程中，使用fab的时候发现ionic自带的控件中并没有遮罩这样的属性这让我们实际操作起来很不舒服如下图所示：

没有遮罩的效果.png

实际在点开feb控件的时候其他操作并不受影响，可是这样明显影响用户体验，所以必须要在主页面上增加遮罩解决问题。</b>
<h3>1、思路</h3> 我们需要以下几个步骤完成我们的遮罩：
<b>a、点击fab，显示遮罩，显示fabList</b>
<b>b、在遮罩显示下，点击fab，遮罩消失，fabList消失</b>
<b>c、在遮罩显示下，点击遮罩，遮罩消失，fabList消失</b>
于是我们总结出，我们需要给fab绑定一个点击事件，然后需要给遮罩也绑定一个点击事件，通过*ngIf来完成显示和消失。很简单的逻辑，也不复杂。
<h3>2、研究源码：</h3><h5>2.1 fab源码 </h5>fab在我们的官方API文档中很少有介绍，顶多介绍了一些sass属性与close()方法，在我们实际操作过程中需要查看fab源码来完成。其源码目录在：项目目录/node_modules/ionic-angular/components/fab 目录下查看fab-container.d.ts文件，经过整理，其源码如下：

import { QueryList } from '@angular/core';
import { Platform } from '../../platform/platform';
import { UIEventManager } from '../../gestures/ui-event-manager';
import { FabButton } from './fab';
import { FabList } from './fab-list';

export declare class FabContainer {
    /**
     * @hidden
     */
    _events: UIEventManager;
    /**
     * @hidden
     */
    _listsActive: boolean;
    /**
     * @hidden
     */
    _mainButton: FabButton;
    /**
     * @hidden
     */
    _fabLists: QueryList<FabList>;
    constructor(plt: Platform);
    /**
     * @hidden
     */
    ngAfterContentInit(): void;
    /**
     * @hidden
     */
    clickHandler(ev: any): void;
    /**
     * @hidden
     */
    canActivateList(ev: any): boolean;
    /**
     * @hidden
     */
    toggleList(): void;
    /**
     * @hidden
     */
    setActiveLists(isActive: boolean): void;
    /**
     * Close an active FAB list container
     */
    close(): void;
    /**
     * @hidden
     */
    ngOnDestroy(): void;
}

这里我们需要一个参数_listsActive 来控制是否显示遮罩，还需要一个方法setActiveLists(isActive)来完成控制fabList的显示。

<h5>2.2 遮罩源码</h5>遮罩源码根据alert的源码样式来获取这里直接贴上源码：

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

这里利用isShow的布尔值来处理判断是否显示遮罩，div中有个backdropclick($event)的click事件，通过这个事件来完成遮罩的点击显示隐藏处理，另event.preventDefault();与event.stopPropagation()；方法来阻止事件冒泡。<a href="http://blog.csdn.net/bangrenzhuce/article/details/71159579"><此处借鉴链接></a>

<h3>3、整合代码</h3> <h5>3.1 在fab上添加ID与绑定点击事件</h5>

<!--绑定id：fabContain    button绑定点击事件：onclick()-->
<ion-fab bottom center style="margin-bottom:2%" #fabContain>
    <button ion-fab color="danger" (click)="onclick()"><ion-icon name="arrow-dropup"></ion-icon></button>
    <ion-fab-list side="top">
        <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
    </ion-fab-list>
</ion-fab>

<h5>3.2 在fab前添加遮罩布局</h5> 这里同2.2代码，不做过多赘述。

<h5>3.3 点击事件绑定与判断</h5>

import { FabContainer } from 'ionic-angular';
import { Component, ViewChild } from '@angular/core';
   
 isShow?:boolean; // 遮罩布局判断
@ViewChild("fabContain") fabContain:FabContainer; //整个fabContainer

//绑定button的点击事件
onclick() {
      this.isShow = !this.fabContain._listsActive;
}

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

这样便完成了我们的功能，接下来看看我们显示的效果如何：

功能完成，显示遮罩.png

SNS项目笔记<三>--fab与遮罩

推荐阅读更多精彩内容