当前位置: 首页 > news >正文

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

 问题:

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

解决思路:

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>

排除自己写的代码的问题

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

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

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 点击遮罩触发*/

根据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) returnthis.showPoptrans()},

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

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

解决后效果图:

相关文章:

  • Qt实现车载多媒体项目,包含天气、音乐、视频、地图、五子棋功能模块,免费下载源文件!
  • Amazon Redshift 使用场景解析与最佳实践
  • 全连接神经网络学习笔记
  • 学习黑客什么是 ARP
  • AutoGen 框架解析:微软开源的多人 Agent 协作新范式
  • 每日学习:DAY24
  • Spring AI 入门(持续更新)
  • 深入解析建造者模式(Builder Pattern)——以Java实现复杂对象构建的艺术
  • 支持鸿蒙next的uts插件
  • 计算机学习路线与编程语言选择(信息差)
  • LLaMA模型本地部署全攻略:从零搭建私有化AI助手
  • 突破网络限制:Windows平台离线搭建Linux环境+Docker化部署AI知识库RAGFlow实战
  • 平板收银系统、国产系统,鸿蒙系统,小键盘的封装与应用—仙盟创梦IDE
  • Matlab 数控车床进给系统的建模与仿真
  • Java执行linux服务器本地命令
  • HTTP Error 500.31 - Failed to load ASP.NET Core runtime
  • 第三节第一部分:Static修饰类变量、成员变量
  • xiaopiu原型设计工具笔记
  • 多环串级PID
  • Spring Boot 启动原理的核心机制
  • 新消费观察| 零售品牌 “走出去” ,如何开辟“新蓝海”?
  • 又一日军“慰安妇”制度受害者去世,大陆登记在册幸存者仅剩7人
  • 巴基斯坦宣布关闭全国空域48小时
  • 加拿大总理访美与特朗普“礼貌交火”
  • 德国联邦议院6日下午将举行总理选举第二轮投票
  • 秦洪看盘|涌现新逻辑,A股放量回升