微信小程序實現自定義遮罩

• 效果圖：

• 代碼：

  1. wxml

         <!-- 觸發遮罩前的視圖-->
         <view>
           <button type="primary" bindtap="showCover">觸發遮罩</button>
         </view>
         <!-- 遮罩層 -->
         <view wx:if="{{isShow}}" class='cover'>
           <!-- 可在此按需求自定義遮罩 -->
           <view class='cover_child'>
             <text class="child-title">遮罩詳情</text>
             <block wx:for="{{dataList}}">
               <view class="child-row">
                 <text>{{item.title}}</text>
                 <text>{{item.text}}</text>
               </view>
             </block>
           </view>
           <image catchtap="hideCover" class="cross" src="/images/cancel.png " />
           <view catchtap="hideCover" wx:if="{{isShow}}" class='bg'></view>
         </view>

2. wxss

         .bg {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.5);
         }
         
         .cover {
           width: 100%;
           height: 100%;
           position: fixed;
           top: 0;
           left: 0;
           display: flex;
           justify-content: center;
           align-items: center;
           z-index: 0;
         }
         
         .cover_child {
           width: 600rpx;
           height: 830rpx;
           background: rgba(255, 255, 255, 1);
           border-radius: 20rpx;
           display: flex;
           flex-direction: column;
           z-index: 5;
         }
         
         .child-title {
           white-space: nowrap;
           margin-left: 43rpx;
           margin-top: 32rpx;
           width: 137rpx;
           height: 32rpx;
           font-size: 34rpx;
           font-weight: bold;
           color: rgba(18, 90, 217, 1);
           line-height: 36rpx;
           margin-bottom: 31rpx;
         }
         
         .child-row {
           display: flex;
           flex-direction: row;
           margin-left: 41rpx;
           margin-top: 40rpx;
           height: 28rpx;
           font-size: 30rpx;
           font-weight: 500;
           color: rgba(3, 3, 3, 1);
           line-height: 36rpx;
         }
         
         .cross {
           margin-bottom: 110rpx;
           bottom: 0rpx;
           position: fixed;
           width: 60rpx;
           height: 60rpx;
           z-index: 5;
         }

3. javascript

         Page({
           data: {
             isShow:false,
             dataList:[
               {
                 title:"文本類型：",
                 text:"文本內容"
               },
               {
                 title: "文本類型：",
                 text: "文本內容"
               },
               {
                 title: "文本類型：",
                 text: "文本內容"
               },
             ]
           },
           hideCover(){
             this.setData({
               isShow: false
             })
           },
           showCover(){
             this.setData({
               isShow:true
             })
           },
         })