一、小程序遮罩層滑動
小程序遮罩層是唯一的一層View，它可以在小程序頁面中出現，實現遮擋效果，通常用於新手引導、提示框、載入提示等功能。在實際使用中，有時需要在小程序遮罩層中增加滑動效果。
可以通過以下方式實現小程序遮罩層的滑動功能：
//wxml代碼
<view class="mask-wrapper">
<scroll-view scroll-y="{{true}}" class="mask-content">
<view class="mask-text">
滑動效果
</view>
</scroll-view>
</view>
//css代碼
.mask-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
}
.mask-content {
width: 100%;
height: 100%;
overflow-y: scroll;
background: #fff;
}
.mask-text {
height: 2000rpx;
width: 100%;
background: #ffffff;
}
其中，將scroll-view的scroll-y設置為true，即可開啟滾動效果，同時給scroll-view添加一個class類名mask-content；給遮罩層添加class類名mask-wrapper，設置position為fixed，實現全屏的覆蓋效果。
二、小程序遮罩層點擊
小程序遮罩層除了可以滑動之外，我們還可以給小程序遮罩層綁定點擊事件，以實現點擊消失的效果。具體實現代碼如下：
//wxml代碼
<view class="mask-wrapper" catchtap="maskTap">
<view class="mask-content">
<view class="mask-text">
點擊消失
</view>
</view>
</view>
//js代碼
Page({
maskTap: function() {
this.setData({
isShow: false
});
}
});
在小程序遮罩層的View上綁定一個catchtap監聽事件maskTap，當點擊小程序遮罩層時，觸發該事件，通過改變isShow變數狀態，實現小程序遮罩層的消失效果。
三、小程序遮罩層透明
小程序遮罩層可以設置透明度，使其更加自然和美觀，通常在實現小程序遮罩層時會使用rgba方式設置小程序遮罩層的顏色值。示例代碼如下：
//wxml代碼
<view class="mask-wrapper">
<view class="mask-content">
<view class="mask-text">
透明效果
</view>
</view>
</view>
//css代碼
.mask-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
}
.mask-content {
height: 200rpx;
width: 200rpx;
background: #ffffff;
}
.mask-text {
height: 100%；
width: 100%;
background: #ffffff;
}
其中，rgba(0, 0, 0, .5)的數值0.5表示背景顏色的透明度，取值範圍為0~1，數值越小，為半透明；數值越大，為不透明。
四、小程序遮罩層引導頁
小程序遮罩層可以用於實現引導頁功能，在新用戶進入小程序時，可以通過小程序遮罩層的引導頁面快速了解小程序的使用方法和版權信息。以下代碼實現了一種簡單的引導頁效果：
//wxml代碼
<view class="mask-wrapper">
<swiper autoplay="{{false}}" duration="{{300}}" circular="{{false}}" current="{{current}}" bindchange="swiperChange" style="width: 100%; height: 100%;">
<swiper-item class="mask-item">
<view>
<image src="../../images/guide1.jpg" mode="widthFix"></image>
</view>
</swiper-item>
<swiper-item class="mask-item">
<view>
<image src="../../images/guide2.jpg" mode="widthFix"></image>
</view>
</swiper-item>
<swiper-item class="mask-item">
<view>
<image src="../../images/guide3.jpg" mode="widthFix"></image>
</view>
</swiper-item>
<view class="mask-close" catchtap="maskClose"></view>
</swiper>
</view>
<!-- css樣式 -->
.mask-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.mask-item {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #ffffff;
}
.mask-close {
position: absolute;
top: 40rpx;
right: 40rpx;
width: 60rpx;
height: 60rpx;
border: 4rpx solid #ffffff;
border-radius: 50%;
background: rgba(0, 0, 0, .6);
}
通過swiper實現引導頁的輪播效果，同時在引導頁末尾添加關閉按鈕，通過監聽maskClose事件，實現小程序遮罩層的關閉效果。
五、小程序遮罩層取消按鈕
有時候，需要添加遮罩層取消按鈕，類似於引導頁中的關閉按鈕。以下代碼是一種實現方法：
//wxml代碼
<view class="mask-wrapper">
<view class="mask-content">
<view class="mask-title">
{{options.title}}
<view bindtap="close" class="mask-close"></view>
</view>
<view class="mask-message">
{{options.message}}
</view>
<view class="mask-btns">
<button bindtap="confirm">確定</button>
<button bindtap="cancel">取消</button>
</view>
</view>
</view>
//css代碼
.mask-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
}
.mask-content {
height: 250rpx;
width: 550rpx;
border-radius: 8rpx;
margin: 0 auto;
background: #fff;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.mask-title {
height: 70rpx;
line-height: 70rpx;
font-size: 32rpx;
text-align: center;
}
.mask-message {
text-align: center;
margin: 20rpx;
}
.mask-btns {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 20rpx;
}
.mask-confirm {
color: #007aff;
}
.mask-close {
position: absolute;
top: 8rpx;
right: 8rpx;
width: 30rpx;
height: 30rpx;
background-image: url(../../images/icon_close.png);
background-position: center center;
background-size: 100% 100%;
}
通過添加確定和取消按鈕實現小程序遮罩層的取消功能，同時在title元素中添加關閉按鈕，並綁定close事件，實現彈出框的關閉效果。
六、小程序遮罩層怎麼覆蓋導航欄
默認情況下，小程序遮罩層無法覆蓋導航欄，如果需要將小程序遮罩層覆蓋到導航欄上方，可以採用如下方式實現：
//wxml代碼
<view class="mask-wrapper" style="position: fixed; top: 0;left: 0;right: 0;bottom: 0;>
...
</view>
<!--css代碼-->
.page {
position: relative;
overflow-x: hidden;
overflow-y: hidden;
background-color: #f8f8f8;
}
將小程序頁面的最外層View元素的position屬性設置為relative，並將overflow-x和overflow-y的值都設置為hidden，即可實現小程序遮罩層覆蓋導航欄的效果。
七、小程序遮罩層避免穿透
在某些情況下，遮罩層下方的頁面內容可以通過點擊事件穿透到遮罩層下方，影響用戶體驗。以下是一種解決穿透問題的方法：
// js代碼
Page({
data: {
isShow: false,
forbidScroll: false
},
showMask: function() {
this.setData({
isShow: true,
forbidScroll: true
});
},
hideMask: function() {
this.setData({
isShow: false,
forbidScroll: false
});
}
});
//wxml代碼
<view class="mask-wrapper" catchtap="hideMask" wx:if="{{isShow}}">
<scroll-view class="scroll-view-content" style="{{forbidScroll ? 'height: 100%;' : ''}}" scroll-y="{{!forbidScroll}}" bindtouchmove="preventTouchMove">
...
</scroll-view>
</view>
//css代碼
.mask-wrapper {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, .5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.scroll-view-content {
width: 90%;
max-height: 90%;
margin: 0 auto;
background-color: #ffffff;
border-radius: 10rpx;
overflow: hidden;
}
//js代碼
Page({
data: {
isShow: false,
forbidScroll: false
},
showMask: function() {
this.setData({
isShow: true,
forbidScroll: true
});
},
hideMask: function() {
this.setData({
isShow: false,
forbidScroll: false
});
},
preventTouchMove: function() {
if (this.data.forbidScroll) {
return;
}
}
});
避免遮罩層下方內容的穿透通過監聽頁面的滑動事件，即touchmove，當事件被觸發時，判斷當前頁面是否被禁止滑動，如果是，則不執行任何操作；否則，執行默認操作原則。同時，在遮罩層的scroll-view元素中添加css樣式：max-height：90%；overflow: hidden，限制scroll-view元素的高度，並隱藏滾動條，以實現遮罩層下方內容的遮蓋效果。
八、小程序遮罩層禁止滾動
在遮罩層出現的情況下，禁止頁面滾動是常見的需求。以下
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/183811.html
微信掃一掃 
支付寶掃一掃 