Uniapp APP端解决自定义弹窗无法遮盖原生navbar和tabbar

已于 2024-07-31 14:41:11 修改
阅读量186 收藏
点赞数 2
文章标签： uniapp web app css
于 2024-07-31 14:40:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53524596/article/details/140822235
版权

问题描述

在Uniapp APP端使用自定义弹窗时，发现无法遮盖住navbar和tabbar，这是因为我们写的弹窗是webview，层级永远比原生组件低，所以无法遮盖。

解决办法

使用页面当成弹窗使用，将页面设置成透明，这时打开的页面层级会高于上个页面，就实现了遮盖原生组件的效果
注意：仅支持App端

参考案例

链接: 全局弹窗示例

weixin_53524596
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp 自定义顶部导航栏 ，以及fixed定位兼容
enjoy124的博客
05-16 599
原因：APP 和微信的原生导航栏和tabbar下，元素区域坐标是不包含原生导航栏和tabbar的。而 H5 里原生导航栏和tabbar是 div 模拟实现的，所以元素坐标会包含导航栏和tabbar的高度。1.使用uview的u-navbar自定义导航栏时，发现网页h5是正常的，但是启动模拟器app时，发现内容全部被导航栏覆盖，顶上去了，如下图。uni-app新增了2个css变量：–window-top和–window-bottom，可以直接style中使用替代top和bottom。
如何在uniapp中弹出层弹出时遮住自带的tabbar
前端小陈的成长记录
06-07 1万+
vue3、uniapp中弹出层实现、如何遮挡自tabbar
uniapp 原生tabbar无法覆盖问题（uView框架）
creatlh的博客
03-07 5868
刚接触 uniapp 发现原生 tabbar 无法覆盖，但还不想用 v-if 或者动态组件，所以自己封装一个组件，通过uni.hideTabBar() 隐藏 tabbar，这样既能用tabbar功能还能解决层级问题，但是需要再每个tabbar页引入自定义组件。
uniapp 关于弹出层遮盖原生tabbar,navbar
jueshileqishou01的博客
04-21 9081
描述：uniapp内置的unipopup无法遮盖原生的navbar,原生tabbar 解决：使用subNvue配合uni-pop解决： pages.json:配置 "app-plus": { "scrollIndicator":"none", "bounce": "none", "safearea": { "bottom": { "offset": "none" } },
Uniapp开发中自定义弹窗如何覆盖原生导航栏和状态栏
ShopWind的博客
08-22 7243
在使用Uni框架开发APP、小程序中，由于原生导航栏和状态栏是属于原生框架渲染，其层级会高于所有内容区域，包括DCloud提供的自定义弹窗组件也无法实现覆盖原生导航栏的目的，翻阅技术资料，有不少开发者说可以使用nvue的方式来实现这个效果，但是感觉实现过程过于繁杂，而且兼容性并不是很好。 那有什么简单的方式可以实现覆盖原生导航栏的效果呢？答案是有的，要不然我也不会写这篇文章来浪费大家的宝贵时间了，对吧。着急的读者可以先看图，我给的图已经实现了这个效果。 首先我们要知道，通过CSS方式设置层级（z-inde
uniapp的tabbar遮挡底部页面显示问题
weixin_51575541的博客
04-22 633
uniapp的tabbar遮挡底部页面显示问题。
Uniapp微信小程序自定义Navbar
09-04
Uniapp框架的针对微信小程序的自定义Navbar代码。直接复制粘贴内容，然后配置好page.json。就可以直接查看效果。
uniapp开发的多端影视APP，对接的苹果CMS
09-10
《基于uniapp的多端影视APP开发：与苹果10CMS的深度对接》 在现代互联网技术中，跨平台开发工具扮演着至关重要的角色。uniapp作为一种新兴的框架，凭借其强大的多端适配能力，深受开发者喜爱。本文将深入探讨如何...
uniapp关于支付宝小程序或钉钉小程序标题栏自定义.txt
12-30
### uniapp中支付宝小程序与钉钉小程序标题栏自定义详解 #### 一、背景介绍 在uniapp开发过程中，为了适应不同的小程序平台（如微信、支付宝、钉钉等），开发者经常需要对页面进行定制化处理，以满足不同平台的...
ionic App 解决android端在真机上tab处于顶部的问题
08-30
Ionic App 解决 Android 端在真机上 Tab 处于顶部的问题 Ionic App 在 Android 端真机上 Tab 处于顶部的问题是很多开发者经常遇到的问题。本文将为大家介绍解决这个问题的方法，涉及到 Ionic Config Provider 的...
android 原生tabbar,原生模态框（支持覆盖原生导航栏和原生tabbar），仅支持安卓...
weixin_31832681的博客
05-29 256
更新记录1.0.3(2020-08-28)1.发布插件2.修复插件云打包无效的问题3.修改使用说明及演示实例4.新增支持修改按钮颜色1.0.1(2020-08-27)1.发布插件查看更多平台兼容性AndroidiOS√×原生插件通用使用流程：购买插件，选择该插件绑定的项目。在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。根据...
跨平台应用开发进阶(三十一) ：uni-app实现覆盖原生控件导航栏和tabbar全屏弹窗
IT全栈 华强工作室
08-19 4026
应用uni-app跨平台框架进行项目开发过程中，需要实现版本更新时全页面弹窗，底部导航栏无法点击的效果。但是，在uni-app中popup弹窗及对话框的遮罩层是覆盖不了原生导航栏和tabbar栏的，而且在tabbar页中使用弹出框会非常的违和。
uni-popup打开，首页自带的tabbar如何丝滑的消失 不使用 uni.hideTabBar
最新发布
keaicll的博客
07-30 212
【代码】uni-popup打开，首页自带的tabbar如何丝滑的消失 不使用 uni.hideTabBar。
uniapp中在组件中使用被遮挡或层级显示问题
qq_59517599的博客
11-11 2677
uniapp中在组件中使用或croll-view标签内使用uni-popup在真机环境下会被scroll-view兄弟元素遮挡，在开发环境下和安卓系统中可以正常显示，但在ios中出现了问题。看了许多文章都没有找到问题的原因，最后看到这一个文章。
关于uni-app中隐藏底部导航栏uni.hideTabbar()的使用
weixin_41979836的博客
06-01 9437
关于uni-app中隐藏底部导航栏uni.hideTabbar()的使用及注意事项
uniapp小程序中给web-view页面添加授权弹窗（使用cover-view组件覆盖实现该功能）
m0_47791238的博客
10-12 4772
web-view是承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。也就是说，小程序中使用web-view打开网页，在页面上写的其它组件会直接被网页给覆盖住。使用cover-view组件覆盖实现该功能
uniapp: webview全屏遮挡住状态栏的解决方案
m0_59638694的博客
03-28 6039
uniapp的状态栏被webview给遮住了，怎么显示状态栏。转载的。
uni-app全局自定义提示框，可覆盖原生标题栏和tabBar
fasdfdssdf的博客
05-06 7877
效果图： uni-app全局自定义提示框，可覆盖原生标题栏和tabBar。具体实现如下： 在main.js引入挂载： import G_show_modal from '@/common/G_show_modal/index.js' Vue.prototype.$showModal=function(op={}){ return new Promise((resolve...
uniapp全屏弹窗，覆盖原生控件导航栏和tabbar，全局调用
热门推荐
前端颜小白
05-27 1万+
uniapp全屏弹窗，覆盖原生控件导航栏和tabbar，全局调用 在uniapp中popup弹窗及对话框的遮罩层是覆盖不了原生的导航栏和tab栏的，在tabbar页中使用弹出框会非常的违和，接下来告诉大家实现的思路。 创建一个页面放置components或者pages中，接着在pages.json中注册当前页面，并设置背景色透明及取消导航栏。 { "path": "components/ymt-updateModel/ymt-updateModel", "style": { "navig
uniapp自定义navbar
09-15
在 UniApp 中，你可以自定义导航栏（navbar）来满足你的需求。下面是一些实现自定义导航栏的步骤： 1. 在 `App.vue` 文件中，找到 `<template>` 部分，在 `<style>` 部分之前添加以下代码： ```html <template> <view class="custom-navbar"> <!-- 自定义导航栏内容 --> </view> </template> ``` 2. 在 `<style>` 部分添加以下样式代码： ```css <style> .custom-navbar { position: fixed; top: 0; left: 0; width: 100%; height: 48px; /* 自定义导航栏高度 */ background-color: #ffffff; /* 自定义导航栏背景颜色 */ z-index: 9999; /* 设置一个较大的 z-index 值确保导航栏显示在最上层 */ } </style> ``` 3. 在需要使用自定义导航栏的页面中引入 `App.vue` 组件，并在页面的 `<template>` 部分中添加以下代码： ```html <template> <view> <!-- 页面内容 --> </view> </template> <script> export default { components: { App } } </script> <style> /* 页面样式 */ </style> ``` 这样，你就可以在 `<view class="custom-navbar">` 中添加自己的导航栏内容，如标题、返回按钮等。注意调整自定义导航栏的样式和布局以适应你的需求。 希望能帮到你！如有更多问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值