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后,重新测试即可解决了。

解决后效果图:
相关推荐
前端小万1 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
码兄科技1 天前
24小时自助健身房系统软件开发实战指南:功能设计与部署方案
java·spring boot·uni-app
拖孩1 天前
代码我能全交给 AI,流量主这 500 个访客它一个都替不了我
前端·后端·微信小程序
2501_916007471 天前
苹果商店iOS应用上架费用全面解析:开发者计划与审核费用计算
android·ios·小程序·https·uni-app·iphone·webview
2501_916008891 天前
如何实现iOS App代码混淆:SwiftShield使用指南
android·ios·小程序·https·uni-app·iphone·webview
甜到心里的蛋糕1 天前
如何用企业微信实现让微信收到通知实时通知
服务器·python·微信小程序·fastapi
2501_916008891 天前
怎么用 Godot 导出 iOS 应用并上架 App Store?签名字段该填什么?
android·ios·小程序·https·uni-app·iphone·webview
2601_963870201 天前
基于springboot的综合网上购物商场系统
微信小程序·小程序·课程设计
2601_963869952 天前
力序健身房管理系统
微信小程序·小程序
郑州光合科技余经理2 天前
同城外卖小程序开发:下单成功后,后台导出能不能对上用户端状态
开发语言·前端·git·后端·uni-app·php·ai编程