uniapp自定义modal弹窗，可覆盖标题栏和tabbar

uniapp自定义modal弹窗，可覆盖标题栏和tabbar

• 前言
• 思路
• 实现
• 尾巴

前言

在开发过程中，我们绝大部分时候会自定义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。
老规矩，喜欢我的文章，欢迎给我点赞，评论，关注，谢谢大家！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！