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

问题:

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

解决思路:

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

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

XML 复制代码
<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>

排除自己写的代码的问题

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

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

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

this.safeAreaInsets

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

XML 复制代码
/**
	 * 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 点击遮罩触发
	 */

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

XML 复制代码
/**
			 * 底部弹出样式处理
			 */
			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()
			},

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

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

解决后效果图:
相关推荐
是一碗螺丝粉16 小时前
拯救你的app/小程序审核!一套完美避开审核封禁的URL黑名单机制
前端·javascript·微信小程序
bug总结20 小时前
深入理解 uni-app 的 uni.createSelectorQuery()
uni-app
真上帝的左手20 小时前
25. 移动端-uni-app
uni-app
编程猪猪侠20 小时前
基于Uni-app+vue3实现微信小程序地图固定中心点范围内拖拽选择位置功能(分步骤详解)
uni-app
江湖有缘1 天前
【Docker项目实战】使用Docker部署Notepad轻量级记事本
docker·容器·notepad++
小徐_23331 天前
Trae 辅助下的 uni-app 跨端小程序工程化开发实践分享
前端·uni-app·trae
斯~内克1 天前
UniApp 页面传参方式详解
网络协议·udp·uni-app
我叫黑大帅1 天前
微信小程序分包:告别加载慢,像拆快递一样简单!
前端·微信小程序
大聪明了1 天前
uniapp vue3 使用 pinia
javascript·vue.js·uni-app