微信小程序中遮罩层的实现

近期在写一点小东西，碰到遮罩层，今天把它总结下来，方便大家共同学习：

有好几种方法，今天先来第一种。

准备工作：

一张图片：close.png 

一、方法1

先上效果：

 点击“核算”以后，遮罩层出现，同时conts（即面板）出现。再次点击“核算”或conts右上角的关闭按钮时，遮罩层消失，conts隐藏。

 源码：

wxml代码

<view class="wrap">  
    <!------------------------------------------------------------------------1  -->
    <!--页面内容区  -->
    <view class="txts">页面内容->根据自己需求陈列</view>   
    <!------------------------------------------------------------------------2  -->
    <!-- 底部固定栏 -->
   <view class="submit">  
        <!--左边  -->  
        <view class="submitL">  
             <text class="all">￥666</text>  
             <view class="mingXi">  
                  <!--2种切换时的状态（此处指“明细”）  -->  
                  <view class="hide{{showView? '' : 'show'}}" bindtap="change">{{showView?'核算':'核算'}}</view>      
                  <view class="hide{{showView? 'show' : ''}}" bindtap="change">{{showView?'核算':'核算'}} </view>      
             </view>  
        </view>    
        <!--右边  -->  
        <view class="submitR">提 交</view>  
    </view>  
    <!---------------------------------------------------------------------------3  -->
    <!--一开始showView的状态  -->  
    <!--在js中，一开始将showView设为true, 通过showView?'':'show'得知一开始showView处于隐藏站状态,
    当然你也可以将showView设为false,只需将下面的  
    showView?'':'show'改为showView?'show':''也一样，表示页面载入时showView是隐藏的  -->
   <view class="hide{{showView?'':'show'}}">  
       <!--遮罩层  -->
       <view class="shade">  
           <!--面板内容  -->
           <view class="conts">  
                这里面的内容根据自己的需求进行详细的编写。。。。。。。  
                <!--右上角的关闭按钮（用于关闭整个conts)  -->  
                <image class="closeImg" src="../../images/close.png" bindtap="close"></image>  
           </view>   
       </view>  
   </view>    
</view>  

wxss代码

.wrap{    
  width: 750rpx;  
  height: auto;    
  font-size: 34rpx;    
}    
/*--------------------------------------------------------------------1  */
.txts{      
  height: 1600rpx;    
}    
/*---------------------------------------------------------------------2  */
.submit{   
  height: 120rpx;  
  display: flex;  
  flex-direction: row;  
  line-height: 120rpx;  
  position: fixed;   
  left: 0;  
  bottom: 0;   
  /*要显示在遮罩层shade的上面 */   
  z-index: 2;  
  }  
/*左边 */  
.submitL{   
    width: 510rpx;   
    background-color: white;  
    border-top: 1rpx solid gainsboro;   
    }  
.all{  
    font-size: 36rpx;   
    color: #FF8C00;   
    margin-left: 20rpx;  
    }  
.mingXi{   
  display: inline-block;   
  height: 120rpx;   
  width: 100rpx;   
  float: right;   
  line-height: 120rpx;   
  margin-right: 20rpx;  
  }  
/*右边 */  
.submitR{   
  width: 240rpx;   
  background-color: #8B008B;   
  color: white;   
  font-size: 36rpx;   
  text-align: center;   
  border-top: 1rpx solid #8B008B;  
  }  
/*------------------------------------------------------------------------3  */
/*遮罩层 */  
.shade{   
  width:100%;   
  height:100%;   
  top:0;   
  background:rgba(0,0,0,0.5);   
  overflow: hidden;   
  /*要显示在wrap的上面 */   
  z-index: 1;   
  position: absolute;  
  }   
  
/*显示与隐藏的内容即点击核算后所展示的详细内容 */  
.conts{   
  width: 100%;   
  height: 428rpx;   
  background-color: white;   
  position: fixed;   
  top: 636rpx;   
  text-indent: 60rpx;  
  }  
    
/*显示整个conts */  
.show{   
  display: block;  
  }  
/*隐藏整个conts */  
.hide{   
  display: none;  
  }  
  
/*关闭按钮（关闭整个conts） */  
.closeImg{   
  width: 60rpx;   
  height: 60rpx;   
  float: right;   
  position: relative;   
  top: -70rpx;   
  left: 2rpx;   
  background-color: white;   
  border-radius: 50%;  
  }  

js代码

Page({
  data: {
    showView: true
  },
  // 用于实现点击“核算”时，来显示与隐藏整个“conts”，这一部分其实是利用了面板的显示与隐藏功能  
  change: function () {
    let that = this;
    that.setData({
      showView: (!that.data.showView)
    })
  },
  // 通过点击“conts”区域里右上角的关闭按钮来关闭整个“conts”，当然了，你可以把该事件作用于“conts”上，此时点击“conts”  
  // 的任意一个地方，都会使得这个“conts”关闭  
  close: function () {
    let that = this;
    that.setData({
      showView: (!that.data.showView)
    })
  }
})  

*2018.3.14上午*

今天把下面的内容增长（高于一屏的高度）后发现，出现了遮罩层的滚动穿透问题，尝试了好久还是没解决掉，后续解决了我会单独贴出，然后链接到这~

*2018.3.14下午*

二、方法2

效果：

点击“核算”以后，遮罩层出现，同时conts出现。再次点击conts右上角的关闭按钮时，遮罩层消失，conts隐藏。

说明：此种方法与前面方法1不同的是，不能通过点击“核算”来隐藏整个conts区域（即面板）与让遮罩消失，其他的效果一样。

源码：

wxml代码：

<view class="wrap"> 
    <!----------------------------------------------------------------------------1  -->
    <!--页面内容区  -->
    <view class="txts">页面内容->根据自己需求陈列</view>   
    <!----------------------------------------------------------------------------2  -->
    <!--底部固定栏  -->
    <view class="submit">    
        <!--左边  -->    
        <view class="submitL">     
            <text class="all">￥666</text>  
            <text class="tit" bindtap="show">核算</text>      
        </view>      
        <!--右边  -->    
        <view class="submitR">提 交</view>    
    </view>    
    <!----------------------------------------------------------------------------3  -->
    <!--遮罩层  -->  
    <view class="shade" hidden="{{flag}}">  
         <!-- 核算内容conts区域  -->  
        <view class="conts">    
            这里面的内容根据自己的需求进行详细的编写。。。。。。。    
            <!--右上角的关闭按钮（用于关闭整个conts)，其实将bindtap="hide"事件加到conts,当点击conts区域的任意一个地方时，  
            都可以关闭整个conts  -->    
            <image class="closeImg" src="../../images/close.png"  bindtap="hide"></image>    
        </view>     
    </view>   

</view>    

wxss代码：

.wrap{      
  width: 750rpx;    
  height: auto;      
  font-size: 34rpx;      
}      
/*-----------------------------1------------------------------------------------  */
.txts{        
  height: 1600rpx;          
}      
/*-----------------------------2------------------------------------------------  */
.submit{  
  height: 120rpx;  
  display: flex;  
  flex-direction: row;  
  line-height: 120rpx;  
  position: fixed;  
  left: 0;  
  bottom: 0;  
  z-index: 2;   
}  
/*左边 */    
.submitL{  
  width: 510rpx;  
  background-color: white;  
  border-top: 1rpx solid gainsboro;   
}  
.all{  
  font-size: 36rpx;  
  color: #FF8C00;  
  margin-left: 20rpx;  
}  
.tit{  
  float: right;  
  margin-right: 60rpx;  
}   
/*右边 */    
.submitR{  
  width: 240rpx;  
  background-color: #8B008B;  
  color: white;  
  font-size: 36rpx;  
  text-align: center;  
  border-top: 1rpx solid #8B008B;  
}  
/*--------------------------------3---------------------------------------------  */
/*遮罩层  */  
.shade{  
  width:100%;  
  height:100%;  
  top:0;  
  background:rgba(0,0,0,0.5);  
  overflow: hidden;  
  z-index: 1;   
  position: absolute;  
}   
.conts{  
  width: 100%;  
  height: 428rpx;  
  background-color: white;  
  position: fixed;  
  top: 650rpx;  
}   
/*关闭按钮（关闭整个conts） */  
.closeImg{  
  width: 50rpx;  
  height: 50rpx;  
  position: absolute;  
  left: 701rpx;  
  top: -20rpx;  
  background-color: white;  
  border-radius: 50%;  
}  

js代码：

Page({
  data: {
    // 一开始遮罩层与conts区域为隐藏
    flag: true
  },
  // 当点击“核算”时，执行 show，flag变为false，遮罩层与conts区域出现
  show: function () {
    this.setData({ flag: false })
  },
  // 当遮罩层与conts区域出现时，执行hide,flag变为true，遮罩层与conts区域再次被隐藏
  hide: function () {
    this.setData({ flag: true })
  }
}) 

三、方法3

效果：

点击“核算”以后，遮罩层出现，同时conts出现。再次点conts的任何地方（包括右上角的关闭按钮）或遮罩层，遮罩层消失，conts隐藏。

说明：该种方法与上面2种方法不同的是，通过单击遮罩层也会使得conts与遮罩消失，还有与方法2一样，不能通过单击“核算”来隐藏conts与遮罩。还有一点值得注意的是，前面2种conts是包裹在遮罩层里的（布局上）------这样原本就使得conts在遮罩层上面显示，所以没必要再给conts设置z-index，但第三种方法：conts不包裹在遮罩层shade里，他们是平级的，所以要给conts设置z-index，使其高于遮罩层显示。

源码：

wxml代码：

<view class="wrap">  
    <!-------------------------------------------------------------------1  -->
    <!--页面内容区  -->
    <view class="txts">页面内容->根据自己需求陈列</view>    
    <!-------------------------------------------------------------------2  -->
    <!--底部固定栏  -->
    <view class="submit">      
        <!--左边  -->      
        <view class="submitL">       
            <text class="all">￥666</text>    
            <text class="tit" bindtap="show">核算</text>        
        </view>        
        <!--右边  -->      
        <view class="submitR">提 交</view>      
    </view>      
    <!-----------------------------------------------------------------3  -->
    <!--遮罩层  -->    
    <view class="shade" bindtap='hide' style='display:{{disp}}'></view>  
        <!-------------------------------------------------------------4  -->
        <!-- 面板区域-》核算内容conts区域  -->    
        <view class="conts" bindtap='hide' style='display:{{disp}}'>      
            这里面的内容根据自己的需求进行详细的编写。。。。。。。      
            <!--点击整个conts区域（包括右上角的关闭按钮）或遮罩层，会使得整个conts与遮罩消失 -->   
            <image class="closeImg" src="../../images/close.png"></image>      
        </view>       
</view>      

wxss代码：

.wrap{        
  width: 750rpx;      
  height: auto;        
  font-size: 34rpx;        
}        
/*------------------------------------------------------1-------------------------  */
.txts{          
  height: 1600rpx;           
}        
/*------------------------------------------------------2--------------------------  */
.submit{  
  height: 120rpx;  
  display: flex;  
  flex-direction: row;  
  line-height: 120rpx;  
  position: fixed;  
  left: 0;  
  bottom: 0;  
  z-index: 2;   
}  
/*左边 */    
.submitL{  
  width: 510rpx;  
  background-color: white;  
  border-top: 1rpx solid gainsboro;   
}  
.all{  
  font-size: 36rpx;  
  color: #FF8C00;  
  margin-left: 20rpx;  
}  
.tit{  
  float: right;  
  margin-right: 60rpx;  
}   
/*右边 */    
.submitR{  
  width: 240rpx;  
  background-color: #8B008B;  
  color: white;  
  font-size: 36rpx;  
  text-align: center;  
  border-top: 1rpx solid #8B008B;  
}  
   
/*---------------------------------------------------3----------------------------  */
/*遮罩层  */    
.shade{    
  width:100%;    
  height:100%;    
  top:0;    
  background:rgba(0,0,0,0.5);    
  overflow: hidden;    
  z-index: 1;     
  position: absolute;     
} 
/*---------------------------------------------------4----------------------------  */
.conts{    
  width: 100%;    
  height: 428rpx;    
  background-color: white;    
  position: fixed;    
  top: 650rpx;     
  z-index: 2   
}         
/*关闭按钮（关闭整个conts） */    
.closeImg{    
  width: 50rpx;    
  height: 50rpx;    
  position: absolute;    
  left: 701rpx;    
  top: -20rpx;    
  background-color: white;    
  border-radius: 50%;    
}    

js代码：

Page({
  data: {
    // 一开始遮罩层与conts处于不显示状态
    disp: "none"
  },
  // 当点击“核算时，执行show，遮罩层与conts显示出来
  show: function () {
    this.setData({
      disp: "block"
    })
  },
  // 点击遮罩层或conts时，遮罩层与conts被隐藏
  hide: function () {
    this.setData({
      disp: "none"
    })
  }
})  

说明：点击“遮罩”隐藏面板，还有一种方法，更简单，如下：

源码：

wxml代码

<view class="wrap">
    <!---------------------------------------------------------------------------------1  -->
    <!--页面内容区  -->
    <view class="conts">
        <text class="title1">页面内容->根据自己需求陈列</text>
        <button class="btn" type="primary" catchtap="click">点我</button>
    </view>
    <!----------------------------------------------------------------------------------2  -->
    <!--遮罩层  -->
    <view class="shade"  wx:if="{{shows}}" bindtap='close'></view>
    <!----------------------------------------------------------------------------------3  -->
    <!--弹出面板区域  -->
    <view class="cont" wx:if="{{ shows}}">
        <text class="tit">面板内容->根据自己需求陈列</text>
    </view>
</view>

wxss代码

.wrap{
  height: 1000px;
}
/*-----------------------------1页面内容区样式----------------------------------  */
.title1{
  font-size: 30rpx;
}
.btn{
  font-size: 30rpx;
  width: 160rpx;
  height: 68rpx;
  margin-top: 200rpx;
}
/*-----------------------------遮罩层样式-------------------------------------  */
.shade{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0,0,0,0.8);
  opacity: 0.5;
  overflow: hidden;
}   
/*----------------------------面板样式-----------------------------------------  */
.cont {
   width: 600rpx;
   height: 360rpx;
   z-index: 2;
   overflow: hidden;
   position: fixed;
   top: 20%;
   left: 60rpx;  
   font-size: 32rpx; 
   border-radius: 10rpx; 
   border: 1rpx solid greenyellow;
   background-color: white;
}  
.tit{
  color: coral;
}

js代码

Page({
  data: {
    // 一开始遮罩层与面板隐藏
    shows: false,
  },
  // 点击“点我”以后遮罩层与面板显示
  click: function (e) {
    this.setData({
      shows: true,
    })
  },
  // 点击遮罩层，显示的遮罩层与面板又隐藏起来
  close: function () {
    this.setData({
      shows: false,
    })
  },
})

说明：这种方法与wx:if="{{}}"与方法2中的hidden="{{}}"实现的思路一模一样，只是条件（true，false）完全相反而已~

结束语：

上面方法都没有解决掉遮罩层的穿透问题，当页面内容高于一屏时，会有穿透问题~，欢迎一起来解决这个问题~

上述4种方法实现手段与效果某些地方大同小异，可根据功能需求进行选取与整合~