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

泰州网站专业制作能免费做片头的网站

泰州网站专业制作,能免费做片头的网站,多用户自助建站,设计logo的方法问题: uniapp项目打包的微信小程序,设置uni-popup type"bottom"时,底部有空隙 解决思路: 1、检查代码是否存在样式问题 2、使用微信小程序自带的调试器元素 3、查看源码定位底部是如何出现该空隙的 1、检查代码 检…

 问题:

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.dtcms.com/a/461071.html

相关文章:

  • 京东获取整站实时商品详情数据|商品标题|数据分析提取教程
  • 【Linux探索学习】第一篇Linux的基本指令(2)——开启Linux学习第二篇
  • Redisson 看门狗机制深度解析:分布式锁的守护者
  • 非预置应用使用platform签名并且添加了android.uid.system无法adb安装解决方法
  • 分布式光纤声波振动传感:守护智慧城市燃气管网安全的 “神经末梢”
  • Hadoop 3.3.5 伪分布式安装配置的完整过程
  • 郑州市中原区建设局网站南京市建设工程档案馆网站
  • Oracle PL/SQL Developer v16的安装以及导出导入表数据
  • 消防管理系统如何重构现代空间防御体系
  • Coze源码分析-资源库-编辑数据库-后端源码-流程/技术/总结
  • Linux之lvm存储卷管理篇
  • 数字大健康浪潮下:智能设备重构人力生态,传统技艺如何新生?
  • 郑州陆港开发建设有限公司网站西安有哪些家做网站的公司
  • 整体设计 逻辑系统程序 之19 内核层最大资本箱为核心的完整设计讨论— 含分层架构、CNN 数据处理支撑、监督闭环与多场景交付物
  • GPT系列模型-详解
  • 【pytest 】 pytest 生命周期
  • DMAIC各个阶段用到的图
  • 企业网站建设 网络服务dedecms网站后台模板修改
  • 国外网站开发现状毕业设计做网站教程
  • 【鸿蒙心迹】参加ICT大赛对我的影响和帮助
  • 从轮询到实时推送:将站内消息接口改造为 WebSocket 服务
  • 海口小微企业网站建设公司注册写10万还是50万好
  • 第四部分:VTK常用类详解(第124章 vtkFlyingEdges3D飞行边缘3D类)
  • 混合云新篇章:H100裸金属租赁与云计算的协同效应
  • 第二章:动态 Prompt 管理与多科室智能问答系统
  • 【项目实战 Day12】springboot + vue 苍穹外卖系统(Apache POI + 工作台模块 + Excel表格导出 完结)
  • 微信小程序-8-电影数据布局案例和对话框及本地存储的应用
  • SD:Ubuntu 系统 stable diffusion Web UI - 安装更多插件
  • 什么是负载均衡?
  • 前端框架学习指南:提升开发效率