当前位置: 首页 > 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后,重新测试即可解决了。

解决后效果图:

http://www.xdnf.cn/news/340021.html

相关文章:

  • 〖 Linux 〗操作系统进程管理精讲(2)
  • DSP28335 串口中断收发及FIFO使用
  • QT实现曲线图缩放、拖拽以及框选放大
  • 10.进程控制(下)
  • PyTorch 入门与核心概念详解:从基础到实战问题解决
  • 卷积神经网络基础(八)
  • (leetcode) 力扣100 7.接雨水(两种非官解,三种官解,对官解进一步解释)
  • MCP vs Function Call:AI交互的USB-C革命
  • Amazon Redshift 使用场景解析与最佳实践
  • 快速上手Pytorch Lighting框架 | 深度学习入门
  • 华为HCIP-AI认证考试版本更新通知
  • 自定义Widget开发:自定义布局实现
  • Redis 重回开源怀抱:开源精神的回归与未来展望
  • 终极终端体验:Warp 使用完全指南
  • 事务(transaction)-中
  • Opencv进阶操作:图像拼接
  • 【金仓数据库征文】金仓数据库:创新驱动,引领数据库行业新未来
  • 电容知识小结
  • LeetCode第284题 - 窥视迭代器
  • 立式筒仓式发酵槽实验台试验装置
  • Lua从字符串动态构建函数
  • LeetCode 热题 100 238. 除自身以外数组的乘积
  • IC ATE集成电路测试学习——PLL测试(一)
  • Redis-商品缓存
  • pycharm无法导入相对路径下其它文件
  • 性能远超SAM系模型,苏黎世大学等开发通用3D血管分割基础模型
  • 【造包工具】【Xcap】精讲Xcap构造分片包(IPv4、ipv6、4G\5G等pcap均可),图解超赞超详细!!!
  • 开发者如何优雅应对HTTPS抓包难题
  • 智能量化策略开发全流程:数据准备,因子计算,因子分析,模型训练,策略构建(附python代码)
  • 硬件选型:工控机的选择要素