微信小程序中遮罩層的實現

近期在寫一點小東西，碰到遮罩層，今天把它總結下來，方便大家共同學習：

有好幾種方法，今天先來第一種。

準備工作：

一張圖片：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種方法實現手段與效果某些地方大同小異，可根據功能需求進行選取與整合~

微信小程序中遮罩層的實現

有好幾種方法，今天先來第一種。

一、方法1

二、方法2

三、方法3

1upx border在某些手機機型上某一邊框顯示不出來解決方案

ES6中數組複製與合併

JavaScript中對數組與對象數組進行排序

uni-app自定義彈窗，底部頁面觸摸穿透問題解決方案（精華）

Object.freeze()凍結對象

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結