uni-popup被遮挡问题、root-portal组件的使用、croll-view内的元素被遮挡

最新推荐文章于 2024-03-20 10:17:13 发布
最新推荐文章于 2024-03-20 10:17:13 发布
阅读量1.7k 收藏 1
点赞数 1
分类专栏： 小程序 文章标签： vue.js 前端 javascript 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljq547152849/article/details/130427126
版权

croll-view标签内使用uni-popup在真机环境下会被scroll-view兄弟元素遮挡 。无法通过z-index去处理

解决方案：在uni-popup组件外套root-portal组件即可 。root-portal原理类似于类似于Vue3的Teleport方法

<root-portal>
 		<uni-popup ref="uniPopupRef" type="center">
		</uni-popup> 
</root-portal>

root-portal的官网介绍: root-portal

jaqi.l
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-native-popup-menu：React Native的弹出菜单组件
01-31
React本机弹出菜单 适用于Android，iOS和（非正式）UWP和react-native-web的React Native的可扩展弹出菜单组件。 特征： 易于使用的弹出/上下文菜单 多种模式：动画，不动画，从底部滑动或弹出框 默认情况下打开和关闭动画 可选的后退按钮处理 造型简单 可自定义各种级别-菜单选项，位置，动画 可以像受控组件一样工作，也可以不受控制 不同的生命周期挂钩 RTL布局支持 社区驱动的功能： 支持UWP，react-native-web和react-native-desktop 打字稿定义 我们感谢社区维护超出我们范围的功能。 上下文菜单，滑入式菜单 弹窗 安装 npm install react-native-popup-menu --save 如果您使用的是较旧的RN版本，请查看我们的兼容性表。 基本用法 将您的应用程序包装在MenuProvider ，然后在需要的地方简单使用Menu组件。 您可以在下面找到一个简单的示例。 有关更详细的文档，请参阅 。 // your entry point import { MenuProvider
react-native-popup-menu:React Native的弹出菜单
05-02
react-native-popup-menu· 特征 定位方式 描述 快速定位 允许将菜单对齐到任何元素的边框 坚持元素的中心 允许按元素宽度的中心显示菜单 动态定位 允许将动态偏移量添加到基本菜单位置 位置限制 自动应用约束，以永不超越屏幕边界。 您将始终看到完整菜单 动画制作 描述 从左到右的支持 未执行。 参见 React Native的纯TypeScript组件。 安装 使用npm npm install " @breeffy/react-native-popup-menu " --save 使用纱 yarn add "@breeffy/react-native-popup-menu" 用法 图书馆版本 React Native版本 描述 如何在Typescript中使用 0.7.0 React本机0.62.2 展示如何在Javascript中使用react-nati
别再被小程序全页变灰给坑了
FE情报局
12-02 1076
在网页中，最好的方案是加到HTML上对应的置灰属性在小程序中，最好不要给全局加，要加的话也要看项目中有没有使用fixed，只给对应的元素加上小程序中可以尝试使用root-portal视图容器。
uni-app中uni-popup组件居中弹出时，弹框被软键盘遮挡
weixin_62192841的博客
01-17 1018
uni-app中uni-popup弹窗被软键盘遮挡问题。
uni-popup顶部被浏览器地址栏遮挡问题解决方案参考
2301_77940797的博客
03-20 242
近期使用uni-app创作移动端网站，当设置uni-popup弹层占满整个屏幕（100vh或者100%）时，发现在真机调试时顶部被浏览器地址栏遮挡无法正常显示，效果如下。因为导航栏也是占据浏览器高度的，当我们设置100vh或100%时会被遮挡，这时我们可以重新获取浏览器可视区域高度，将此高度赋值给弹层高度。发现了一种解决方案，供大家参考。
react-popup：React弹出组件
02-04
简单而强大的react弹出组件。 -简化营销 0.9.x中的重大更改 现在，弹出窗口和叠加层是两个单独的层，以允许更多自定义。 有关样式示例，请参见 。 全局API方法 react-popup背后的想法是将其用作本机window.alert替代品。 具有一次仅显示一个弹出窗口的相似性。 这就是为什么我们使用全局API控制组件而不是在组件内部呈现它的原因。 也许这是一种反模式，也许不是。 如果还不存在问题，请打开一个问题随意讨论。 安装 使用npm（或yarn）安装它（ npm install react-popup --save ）。 该组件由API驱动，意味着您只能在全局级别上渲染一次。 这
Root-Portal-开源
07-20
监控文件、进程等，并直接在桌面或透明的无边框窗口中显示更改。 用于监视系统日志和提供有关系统活动的反馈。
微信小程序官方组件展示之视图容器root-portal源码
软件事业部的博客
08-17 993
功能描述：使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。
uniapp中在组件中使用被遮挡或层级显示问题
qq_59517599的博客
11-11 2039
uniapp中在组件中使用或croll-view标签内使用uni-popup在真机环境下会被scroll-view兄弟元素遮挡，在开发环境下和安卓系统中可以正常显示，但在ios中出现了问题。看了许多文章都没有找到问题的原因，最后看到这一个文章。
uniapp的map组件层级过高 覆盖弹窗
CheriseZhou的博客
10-14 3884
有什么问题欢迎大家提~目前在map组件上叠加openlayers图层还没琢磨出来，欢迎大佬指导~
Taro3.x 容易踩坑的点（阻止滚动穿透，弹框蒙层父级定位）
Embrace924的博客
02-22 2462
Taro3.x 容易踩坑的点（阻止滚动穿透，弹框蒙层父级定位）
react-leaflet-editable-popup:react-leaflet组件，扩展了弹出窗口的功能
05-14
React传单可编辑弹出窗口 一个用于传单的小插件，允许作者使弹出窗口可编辑。 您也可以使用弹出窗口删除其源。 这是从改编来与React-Leaflet一起使用的。 / 有关示例，请参 。 单击弹出窗口以获取说明。 参见，使用react-redux并使用单独的组件来生成数组生成的标记和弹出窗口。 要求 该软件包默认与react-leaflet版本3一起使用。 如果您仍在使用react-leaflet @ ^ 2，请使用npm i react-leaflet-editable-popup@^1.0.0 ，或在可编辑的弹出窗口上使用v2 npm i react-leaflet-editable-popup@^1.0.0 。 有关详细信息，请参见部分。 安装 通过npm安装： npm install react-leaflet-editable-popup 或者只是从src文件夹中获取Ed
解决VantUI popup 弹窗不弹出或无蒙层的问题
01-18
背景 ####组件PopupTime.vue 把vant官网的popup+时间选择器抽成组件： popup1show: true 即弹窗显示 <van-datetime-picker show-toolbar :title=popupTitle.popupName v-model=
flycheck-popup-tip：使用popup.el显示Flycheck错误消息
02-05
flycheck-popup-tip：使用popup.el显示Flycheck错误消息
uni-app自定义uni-popup弹窗内容
最新发布
03-22
自定义uni-popup内容，包含picker-view组件，前提基础需要运行在uni-app项目之下，且已保证插入外置组件，根据传入的list数据渲染选择列表，且能回填数据 组件调用<SelectPick v-if="showPick" v-model="pickValue" @close="showPick=false" :dataList="dataList" :valueKey="'value'" />
uni-ui安装初始化
11-23
uni-app配置uni-ui组件库
uni-app 离线打包安卓APP常见问题汇总
Hello_World_CFF的博客
04-27 4033
Android Studio 运行HyperLPR开源项目安卓APP 前提：已安装Android Studio 作为一个安卓小白，我学uni-app只是机缘巧合，只是想看看微信小程序怎么开发的，然后一入坑，深似海，我已经负责，小程序，APP（安卓，ios），H5 啦，最棘手的还是APP，之前以为只要会离线打包就好了，现在还涉及原生插件开发了，真的很难啊。。一点点摸索中，希望有好入手的东西，看到的朋友，多给指指明路！万分感谢。 一、SDK配置 配置sdk所在的目录（ndk据项目配置） sdk.dir=D\:
uniapp 踩坑记录
weixin_57407439的博客
10-19 118
记录自己用uniapp开发微信小程序、H5踩的各种坑。
uni-popup如何遮挡住uniapp自带的tabbar
08-28
### 回答1： uni-popup 是 uni-app 提供的一个组件，它可以用来弹出一个浮层，覆盖在其他内容之上。如果你想使用 uni-popup 遮挡住 uni-app 自带的 tabbar，你可以这样做： 1. 在 uni-app 的根目录下新建一个文件夹，名为 components，然后在 components 文件夹中新建一个组件，名为 uni-popup。 2. 在 uni-popup 组件中，使用 v-if 指令来控制 uni-popup 组件的显示和隐藏。 3. 在 uni-popup 组件中，使用 fixed 定位来设置 uni-popup 组件的位置，并且将它的 z-index 设置为一个较大的值，使它能够在其他组件之上。 4. 在 uni-app 的根目录下的 main.js 中，引入 uni-popup 组件并注册为全局组件。 5. 在 uni-app 的根目录下的 main.js 中，通过 Vue.prototype.$popup 方法将 uni-popup 组件绑定到 Vue 的原型上。 6. 在 uni-app 的根目录下的 main.js 中，通过 Vue.prototype.$popup.show 方法来显示 uni-popup 组件。 7. 在 uni-app 的根目录下的 main.js 中，通过 Vue.prototype.$popup.hide 方法来隐藏 uni-popup 组件。 8. 在 uni-app 的根目录下的 main.js 中，通过 Vue.prototype.$popup.toggle 方法来切换 uni-popup 组件的显示状态。 示例代码如下： ``` ### 回答2： 在uniapp中，uni-popup是一种常用的弹窗组件，用于实现弹出窗口效果。如果需要遮挡住uniapp自带的tabbar，可以通过以下几种方式实现。 1. 使用绝对定位：可以通过在uni-popup组件中设置样式position: fixed; bottom: 0;来将弹窗定位到屏幕底部，从而覆盖住tabbar。 2. 添加遮罩层：如果想要在弹窗出现时将整个页面遮挡住，可以在弹窗组件外部再添加一个遮罩层组件，通过设置遮罩层的样式position: fixed; top: 0; left: 0; right: 0; bottom: 0;来覆盖整个页面，包括tabbar。 3. 修改tabbar的z-index：如果觉得遮罩层不够灵活，还可以尝试直接修改tabbar组件的样式，增加z-index的值，使其在重叠时覆盖在uni-popup组件上方。 需要注意的是，以上方法需要根据实际情况进行调试和适应，可能会涉及到组件层级等问题，可以通过调整组件的层级关系来达到遮挡住tabbar的效果。同时，还要根据uniapp的版本和具体项目的需求来选择合适的方式进行操作。 ### 回答3： 在uni-app中，通过uni-popup组件来实现弹窗遮挡住自带的tabbar是可行的。具体步骤如下： 1. 在需要显示弹窗的页面中引入uni-popup组件，例如在template中添加`<uni-popup></uni-popup>`标签。 2. 根据业务需求，设置uni-popup的样式和位置，可以通过uni-popup的属性和样式控制组件的宽度、高度、位置等。这些属性可以参考uni-popup的文档或示例代码进行调整。 3. 在弹窗内部编写弹窗内容，可以是文本、图片、表单等交互元素。 4. 为了实现弹窗遮挡住自带的tabbar，在弹窗的样式中设置`z-index`属性为一个高于tabbar的数值，例如100以上。 5. 当需要显示弹窗时，使用uni-popup组件提供的show方法或者v-model来控制弹窗的显示与隐藏。 综上所述，我们可以通过使用uni-popup组件，并设置其样式的z-index属性来实现遮挡住uni-app自带的tabbar的效果。当然，根据实际需求，还可以进一步调整弹窗的样式和位置以达到更好的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值