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