前言
在开发过程中，我们绝大部分时候会自定义modal弹窗来实现自己的需求，通过组件的方式实现标题栏和tabbar无法被mask覆盖，可能还会存在滚动穿透的问题。今天我们来通过另外一种方式来实现，可以让mask覆盖标题栏和tabbar，而且不会有滚动穿透问题。
思路
实现思路就是通过新启一个页面，把页面的背景设置为半透明来达到modal的效果，由于是新启页面，所以可以覆盖之前页面的标题栏和tabbar，但是这种方案只在APP上有效果，小程序上无法达到预期的效果。
实现
1、首先项目中配置一个tabbar，然后随便新建两个页面，pages.json部分配置如下：
//省略页面的配置
...
"tabBar": {
"color": "#959595",
"selectedColor": "#007aff",
"backgroundColor": "#f9f9f9",
"borderStyle": "white",
"fontSize": "12px",
"iconWidth": "24px",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "/static/logo.png",
"selectedIconPath": "/static/logo.png",
"text": "首页"
}, {
"pagePath": "pages/second/thrid",
"iconPath": "/static/logo.png",
"selectedIconPath": "/static/logo.png",
"text": "我的"
}]
}
手机上运行效果图如下：
2、然后再新建一个页面用来做自定义modal弹窗，pages.json中配置如下：
//省略部分代码
...
{
"path" : "pages/second/second",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom",
"app-plus": {
"animationType": "fade-in", // 设置fade-in淡入动画，为最合理的动画类型
"background": "transparent", // 背景透明
"backgroundColor": "transparent", // 背景透明
"webviewBGTransparent":true,
"mask":"none",
"popGesture": "none" // 关闭IOS屏幕左边滑动关闭当前页面的功能
}
}
}
//省略部分代码
...
3、然后再页面中设置好page的背景和mask点击消失的事件，代码如下：
<template>
<view class="mask" @click="dimiss">
<view class="content">
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
//点击mask消失，由于是页面实际相当于返回
dimiss(){
uni.navigateBack({
delta: 1
})
}
}
}
</script>
<style>
page {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
}
.mask {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.content {
width: 600rpx;
height: 800rpx;
border-radius: 20rpx;
background-color: white;
}
</style>
4、首页中点击logo弹出页面：
//省略部分代码
...
tap(){
uni.navigateTo({
url: "../second/second"
})
//省略部分代码
...
}
手机上运行效果图如下：
可以看到标题栏和tabbar已经成功被mask覆盖。这里只是为了展示效果，页面元素就随便写了一点，不要喷，狗头保命。
尾巴
今天的内容相对来说比较简单，但是特别要注意这种方式只适用于APP。
老规矩，喜欢我的文章，欢迎给我点赞，评论，关注，谢谢大家！