火山引擎 ADG 社区

火山引擎 ADG 社区 uniapp项目打包的微信小程序，设置uni-popup type=“bottom“时，底部有空隙

uniapp项目打包的微信小程序，设置uni-popup type=“bottom“时，底部有空隙

看代码中有一个paddingBottom 设置，有一个 this.safeAreaInsets + 'px'，检查多次代码，都是正常没有问题，样式设置也没有问题，在H5环境展示没有问题，只存在与微信小程序真机环境。uniapp项目打包的微信小程序，设置uni-popup type="bottom"时，底部有空隙。unia-popup中的源码中有PopUp 弹出层 bottom 底部弹出，全局查找b

chjunlinux

437人浏览 · 2025-05-14 15:03:40
chjunlinux  ·  2025-05-14 15:03:40 发布

 问题：

uniapp项目打包的微信小程序，设置uni-popup type="bottom"时，底部有空隙

uniapp项目打包的微信小程序，设置uni-popup type=“bottom“时，底部有空隙_Click

解决思路：

1、检查代码是否存在样式问题
2、使用微信小程序自带的调试器元素
3、查看源码定位底部是如何出现该空隙的
1、检查代码

检查多次代码，都是正常没有问题，样式设置也没有问题，在H5环境展示没有问题，只存在与微信小程序真机环境

<uni-popup ref="shareUniPopup" :animation="true" type="bottom" @maskClick="maskClickpopup()" @change="changePopup()" :maskBackgroundColor="'rgba(0, 0, 0, 0.7)'">
			<view class="sharePopupClass">
				<view class="morePopupTitleClass">
					<view class="shareTitleClass">已选{{selectedIdDataList.length}}张图片</view>
					<image src="/static/images/close.png" style="width: 36rpx;height: 36rpx;margin-right: 34rpx;" @click="closeSharePopupClick"></image>
				</view>
				<view style="height: 2rpx;width: 100%;background-color: #CDCDCD;"></view>
				<view class="uni-margin-wrap">
					<swiper class="swiper">
						<swiper-item>
							<view class="swiper-item uni-bg-red">A</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-green">B</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-blue">C</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</uni-popup>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.

排除自己写的代码的问题

2、使用微信小程序自带的调试器元素

调试也没有看到有空隙位置的设置高度，只能去看uni-popup的源码了

uniapp项目打包的微信小程序，设置uni-popup type=“bottom“时，底部有空隙_uni-app_02

3、查看源码定位底部是如何出现该空隙的

this.safeAreaInsets

unia-popup中的源码中有PopUp 弹出层 bottom 底部弹出，全局查找bottom

/**
	 * PopUp 弹出层
	 * @description 弹出层组件，为了解决遮罩弹层的问题
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
	 * @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
	 * 	@value top 顶部弹出
	 * 	@value center 中间弹出
	 * 	@value bottom 底部弹出
	 * 	@value left		左侧弹出
	 * 	@value right  右侧弹出
	 * 	@value message 消息提示
	 * 	@value dialog 对话框
	 * 	@value share 底部分享示例
	 * @property {Boolean} animation = [true|false] 是否开启动画
	 * @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
	 * @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
	 * @property {String}  backgroundColor 主窗口背景色
	 * @property {String}  maskBackgroundColor 蒙版颜色
	 * @property {String}  borderRadius 设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"
	 * @property {Boolean} safeArea		   是否适配底部安全区
	 * @event {Function} change 打开关闭弹窗触发，e={show: false}
	 * @event {Function} maskClick 点击遮罩触发
	 */
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.

根据bottom字段全局查找到了：底部弹出样式处理

/**
			 * 底部弹出样式处理
			 */
			bottom(type) {
				this.popupstyle = 'bottom'
				this.ani = ['slide-bottom']
				this.transClass = {
					position: 'fixed',
					left: 0,
					right: 0,
					bottom: 0,
					paddingBottom: this.safeAreaInsets + 'px',
					backgroundColor: this.bg,
					borderRadius:this.borderRadius || "0",
				}
				// TODO 兼容 type 属性 ，后续会废弃
				if (type) return
				this.showPoptrans()
			},
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

看代码中有一个paddingBottom 设置，有一个 this.safeAreaInsets + 'px'，

尝试直接设置 paddingBottom： 0后，重新测试即可解决了。

解决后效果图：

uniapp项目打包的微信小程序，设置uni-popup type=“bottom“时，底部有空隙_微信小程序_03

# uni-app # 微信小程序 # 小程序
Logo
火山引擎 ADG 社区

火山引擎开发者社区是火山引擎打造的AI技术生态平台，聚焦Agent与大模型开发，提供豆包系列模型（图像/视频/视觉）、智能分析与会话工具，并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长，新用户可领50万Tokens权益，助力构建智能应用。

更多推荐

Chess用户界面设计：Tailwind CSS样式系统和组件库

GitHub推荐项目精选中的ch/chess是一个类似chess.com的多人在线象棋平台，它采用现代化的前端技术栈构建，尤其在用户界面设计上通过Tailwind CSS样式系统和组件库实现了优雅且功能丰富的交互体验。本文将深入探讨该项目如何利用Tailwind CSS打造一致的设计语言和高效的组件系统，为象棋爱好者提供沉浸式的游戏界面。## 🎨 Tailwind CSS样式系统：构建统一视

avatar 火山引擎 ADG 社区

终极指南：GPT-Engineer如何通过AI自动发现代码问题并提升质量

GPT-Engineer是一款强大的AI驱动代码工具，它能帮助开发者自动检测潜在代码问题、优化代码质量，让编程效率提升3倍以上。无论是新手还是资深开发者，都能通过这款工具轻松发现代码中的隐藏缺陷，减少调试时间，释放更多精力在创造性工作上。## 一键发现代码问题：GPT-Engineer的AI审查魔力GPT-Engineer的核心能力在于其内置的智能代码分析系统。通过集成Python代码格式

avatar 火山引擎 ADG 社区

SatDump中的纠错编码技术：从RS码到Turbo码的完整实现指南

在卫星数据传输过程中，信号往往会受到各种干扰，导致数据错误。SatDump作为一款通用卫星数据处理软件，集成了多种先进的纠错编码技术，确保从卫星接收到的数据能够准确解码。本文将深入解析SatDump中从Reed-Solomon（RS）码到Turbo码的实现细节，帮助读者理解这些技术如何保障卫星通信的可靠性。## 为什么纠错编码对卫星数据至关重要？卫星与地面站之间的通信链路面临着空间辐射、大

avatar 火山引擎 ADG 社区
  • 浏览量 437
  • 收藏 0
  • 0

所有评论(0)

查看更多评论 

chjunlinux

@weixin_44066506
已为社区贡献13条内容