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

谁践踏了优雅 2022-05-29 00:29 685阅读 0赞

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

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

准备工作：

一张图片：close.png ![20180323155125341][]

一、方法1

先上效果：

![20180323145054795][]

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

** **源码：

wxml代码

<view class="wrap">  
        
        
        <view class="txts">页面内容->根据自己需求陈列</view>   
        
        
       <view class="submit">  
              
            <view class="submitL">  
                 <text class="all">￥666</text>  
                 <view class="mingXi">  
                        
                      <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>  
        
          
        
       <view class="hide{
       {showView?'':'show'}}">  
           
           <view class="shade">  
               
               <view class="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

效果：

![2018032315040483][]

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

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

源码：

wxml代码：

<view class="wrap"> 
        
        
        <view class="txts">页面内容->根据自己需求陈列</view>   
        
        
        <view class="submit">    
                
            <view class="submitL">     
                <text class="all">￥666</text>  
                <text class="tit" bindtap="show">核算</text>      
            </view>      
                
            <view class="submitR">提 交</view>    
        </view>    
        
          
        <view class="shade" hidden="{
       {flag}}">  
               
            <view class="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

效果：

![20180323152028428][]

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

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

**源码：**

wxml代码：

<view class="wrap">  
        
        
        <view class="txts">页面内容->根据自己需求陈列</view>    
        
        
        <view class="submit">      
                  
            <view class="submitL">       
                <text class="all">￥666</text>    
                <text class="tit" bindtap="show">核算</text>        
            </view>        
                  
            <view class="submitR">提 交</view>      
        </view>      
        
            
        <view class="shade" bindtap='hide' style='display:{
       {disp}}'></view>  
            
                
            <view class="conts" bindtap='hide' style='display:{
       {disp}}'>      
                这里面的内容根据自己的需求进行详细的编写。。。。。。。      
                   
                <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"
        })
      }
    })

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

![20180323142750513][]

源码：

wxml代码

<view class="wrap">
        
        
        <view class="conts">
            <text class="title1">页面内容->根据自己需求陈列</text>
            <button class="btn" type="primary" catchtap="click">点我</button>
        </view>
        
        
        <view class="shade"  wx:if="{
       {shows}}" bindtap='close'></view>
        
        
        <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种方法实现手段与效果某些地方大同小异，可根据功能需求进行选取与整合~

更新于：2019-10-30

关于触摸穿透的问题：请参考此文章[https://blog.csdn.net/Syleapn/article/details/102823424][https_blog.csdn.net_Syleapn_article_details_102823424]

以前的写法有些繁琐，直接可以参考这边（此方法即可）[https://blog.csdn.net/Syleapn/article/details/102823424][https_blog.csdn.net_Syleapn_article_details_102823424]

[20180323155125341]: /images/20220529/a3285ccd77e746869f934748e9d18597.png
[20180323145054795]: /images/20220529/ef05053dd6364720915ef481d19177f0.png
[2018032315040483]: /images/20220529/8e1de610cbdd496aa84023a6eaec0f16.png
[20180323152028428]: /images/20220529/da647a6a27ae4304b306881ee1aaf973.png
[20180323142750513]: /images/20220529/26e5ebadea904775b60f782c5dd239a6.png
[https_blog.csdn.net_Syleapn_article_details_102823424]: https://blog.csdn.net/Syleapn/article/details/102823424