uniapp中Popup弹出层底部空隙问题（手把手图解）

最新推荐文章于 2024-05-25 14:53:20 发布

走出半生的少年

最新推荐文章于 2024-05-25 14:53:20 发布

阅读量5.5k

点赞数 23

分类专栏： uniapp 微信小程序文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_55258023/article/details/126342160

版权

在开发uniapp项目中，我们会使用到popup弹出层

Popup弹出层的弹出方式分为一下几种

top	顶部弹出
center	居中弹出
bottom	底部弹出
left	左侧弹出
right	右侧弹出
message	预置样式：消息提示
dialog	预置样式：对话框
share	预置样式：底部弹出分享示例

我遇到的问题是底部弹出层有一个间隙的问题

在iPhone 5/6/7/8中并不会出现这样的问题

但是在iPhone X/XR/12/13中会出现这样的问题

如图

解决方案

我开始在网上，百度，csdn，博客园找解决方案。

可能是我搜索的问题，并没有找到解决方案。

于是，我就去看这个ui库中这个组件的源码。

我该了源码，这个问题就解决了。

如图

首先找到Popup的源码

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

走出半生的少年

关注关注

23
点赞
踩
31

收藏

觉得还不错? 一键收藏
25
评论
uniapp中Popup弹出层底部空隙问题（手把手图解）

uniapp中Popup弹出层底部空隙问题（手把手图解）
复制链接

扫一扫

专栏目录

关于uniapp小程序在苹果手机会出现的问题

shika233的博客

02-25

3347

笔记 1、uni-app 底部安全距离问题参考uni-app底部安全距离遮挡以及底部tabbar距离 // ios底部安全距离-padding .savepadding{ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; } // ios底部安全距离-bottom .savebottom

苹果小程序 uni-popup 弹出层显示底部弹框会有镂空

weixin_57653786的博客

08-06

1140

在其添加:safe-area='false',可以解决这一问题。

25 条评论您还未登录，请先登录后发表或查看评论

uniapp App去除iOS底部安全区域白边

最新发布

weixin_59685936的博客

05-25

626

uniapp App去除iOS底部安全区域白边

【uniapp2.0】解决真机测试底部有空白问题

栀妹儿的炼丹炉

07-25

2198

根因：这种情况一般是在小程序中为了隐藏tabbar调用的，但是有些页面并没有tabbar展示，而此时调用该function会fail，如果没有fail函数，会直接抛出报错。我的问题是：我的空白区域和内部导航栏一样高，原来是因为没改导航默认参数↓。现在这个白色部分被叫做“安全区域”（好像开发故意放的）登录页写的时候没注意看pages.json的参数，现在app在iPhone上的空白解决了！写明：custom 是隐藏导航栏。

uniapp底部弹出层(uni-popup)使用技巧

m0_63553261的博客

03-01

2973

uniapp底部弹出层(uni-popup)使用技巧

uniApp解决ios app真机底部安全区域（空白）问题

桃桃雾的博客

01-10

1294

uniApp解决ios app真机底部安全区域（空白）问题。

uniapp-微信小程序page底部有空白，高度随内容自适应，底部无法固定

weixin_47338877的博客

04-14

2246

uniapp-微信小程序page高度随内容自适应，底部有空白，底部无法固定欢迎使用Markdown编辑器在做微信小程序时，page如果没有设置最小高度，那么高度会随着内容而自适应，但是需求是在底部有一个按钮，无论页面内容如何变化，都位于内容的最下面。如果只是撑大page 若page高度<100% 那么按钮只是在page底部而不是屏幕刚开始想到的是绝对定位，但放下如果page的内容过多，会覆盖到按钮上。代码 page{ height: 100%; } .tmpl_mobile{

uniapp中使用弹出层

qq_45903009的博客

07-23

5790

uniapp中使用弹出层因为业务的需要，需要弹出一个复选框，使用uniapp中自带的框架使用：第一步：下载下示例项目，找到主要的文件夹第二步：将该文件夹放到组件的地方第三步：使用 1· 2· 3· 存在问题：第一：不需要通过import进行引用，直接使用就可以了，使用的时候一定要放在最外面，要不然弹出层弹不出来，第二：可以在该标签之内添加想要的任何组件，包括自定义的，随意自定义样式 ...

在vant中使用时间选择器和popup弹出层的操作

01-21

我就废话不多说了，大家还是直接看代码吧~ 选择日期 value=datetime click=showDatePicker> <van-popup v-model=showDatePicker position=bottom :style={ h

vue解决弹出蒙层滑动穿透问题的方法

10-17

主要介绍了vue解决弹出蒙层滑动穿透问题的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

Popup弹出框添加数据实现方法

08-29

Popup 弹出框是 Web 开发中常用的交互方式之一，它可以在当前页面上弹出一个新的窗口，从而实现一些特殊的交互功能。今天，我们将详细介绍如何使用 JavaScript 和 Django 实现 Popup 弹出框添加数据的简单实现方法。...

可自定义的底部弹出框

09-21

仿分享的底部弹出框，运用gridview实现item的动态添加，可以自适应布局，简单实用

微信小程序弹出层，右上角关闭按钮

07-14

在微信小程序开发中，弹出层（Popup）是一种常见的用户交互元素，用于提供临时性的信息展示、用户操作或对话框。微信小程序的弹出层设计通常包括一个可点击的按钮来触发弹出，以及在弹出层右上角设置一个关闭按钮，...

layui 弹出层值回传解决方式

10-16

在使用layui框架构建Web应用时，经常会遇到需要在弹出层（popup layer）与主页面之间传递数据的情况。layui提供了一种优雅的方式来实现弹出层的值回传，本文将详细解析这一功能的实现方法。首先，我们来看一下...

uni-app页面下方空白解决方案

qq_43644046的博客

03-09

4927

uniapp开发app时候，出现了空白，即使html,body设置100%也没用，情况如图下方空白之跟随着详情介绍的内容自由变化背景色于是我把详情介绍这个<view>添加了class，设置了padding-buttom:150rpx,大家可以适量取值于是也算成功但是这也有弊端，因为详情介绍长短不一，设置过小会出现空白，如果设置过长，会导致页面下面多了有背景色的空缺。这是比较简单的方式，还有个比较好的思路，判断一下界面长度，如果超出界面就设置100%，如果没有超出，

uniapp的底部弹出层实现保姆式教程

qq_33267306的博客

05-06

1260

uniapp的底部弹出层实现保姆式教程

前端开发工作中可能会遇到的问题及解决方法

Bonsoir777的博客

09-14

2859

本文主要分享前端开发工作中可能会遇到的问题及解决方法

Dialog对话框弹出底部有空隙的解决方案

ChatGPTer

11-09

4979

通常我们会用extends Dialog方式实现很多自定义的对话框，然后通过super(context, R.style.dialog_fullscreen_menu);设置对话框的样式，比如： <style name="dialog_fullscreen_menu"> <item name="android:windowBackground">@colo...

uniapp进阶uniPay微信小程序商城uniCloud云开发APP

06-30

课程亮点：纯前端实现H5、小程序、APP商城开发；技术栈：uniapp+uniCloud+unipay+uni-ui+uView+vuex；学完可开发定制化商城，web前端技术再进阶一大步；知识模块：1.uniapp+unicloud云开发2.uniapp常用组件库及官方扩展UI库3.uView第三方UI组件库4.unicloud云开发实践，管理校验token权限5.vuex状态管理module模块商业级使用6.uni-id微信一键登录及手机验证码登录7.开通微信支付及支付宝支付的全流程操作，unipay的实战

uniapp popup

05-16

Uniapp 中可以使用 `<popup>` 标签来实现弹出框的效果。具体使用方法如下： 1. 在需要弹出框的页面中引入 `<popup>` 组件： ```html <template> <view>  <popup></popup> </view> </template> ``` 2. 在 `<popup>` 组件中添加需要弹出的内容： ```html <template> <view> <view @click="showPopup">点击弹出框</view> <popup> <view>这里是弹出框的内容</view> </popup> </view> </template> ``` 3. 在 `<script>` 标签中添加 `showPopup` 函数来控制弹出框的显示和隐藏： ```javascript export default { methods: { showPopup() { this.$refs.popup.show() } } } ``` 此时点击页面中的 "点击弹出框" 文字，即可弹出框中的内容。同样的，可以在 `showPopup()` 函数中调用 `this.$refs.popup.hide()` 方法来隐藏弹出框。