uniapp uni-popup底部弹框留白 底部颜色修改 滚动穿刺

做底部弹框的时候,可能出现以下场景需要处理。

一、出现底部留白不是白色,需要修改颜色的时候:

1、如果弹框不需要圆角效果,则在uni-popup加上背景色就行,弹框是个直角样式:

2、如果需要圆角效果,千万不能加backgroundColor这个属性,在style里面设置view的圆角效果:

其中style样式:

效果:

底部会有安全距离:

如果直接设置padding-bottom:20rpx,会出现如下:

这时候需要设置uni-popup的safeArea属性为false:

效果:

需要在style设置底部间距:

三、弹框滚动时背景跟着滚动,解决方法监听change事件,设置overflow属性:

xml:

头部添加page-meta属性

弹框添加change方法

js里面method:

这样就不会滚动穿刺了。

最终代码:

其中type是指底部弹出,change方法解决弹框滚动时背景跟着滚动,safeArea是指弹框底部是否有安全距离。

其中设置背景白色,上圆角,然后就是距离底部要动态根据底部安全距离做留白,有的没有这个安全距离就给了20rpx。

相关推荐
CHB4 小时前
uni-app x 蒸汽模式 iOS版 性能测试基准报告 Benchmark
ios·uni-app·swiftui
衍生星球4 小时前
SpringBoot3 + Vue3 + 微信小程序如何学习,以及学哪些技术,组件
sql·微信小程序·uni-app·vue·springboot
编程猪猪侠1 天前
UniAppx安卓app实现左侧导航与右侧内容联动滚动
android·uni-app
千逐681 天前
Uniapp 鸿蒙实战之 AtomGit APP - 仓库详情与文件树浏览
服务器·microsoft·uni-app
万物得其道者成2 天前
uni-app App 热更新实现指南:从接口检查到下载安装重启(附带AI提示词)
uni-app
anyup2 天前
uView Pro 正式支持 MCP 协议!让 AI 秒懂你的组件库
前端·uni-app·ai编程
千逐682 天前
Uniapp 鸿蒙实战之 AtomGit APP - 首页设计与仓库列表实现
华为·uni-app·harmonyos
天丁o3 天前
Spring Boot + uni-app 智慧考勤闭环 Demo:打卡记录、异常状态和日统计如何复用到企业系统
spring boot·uni-app·mybatis plus·企业管理系统·考勤系统
这是个栗子3 天前
uni-app 微信小程序开发:常用事件指令(@xxx)(一)
微信小程序·小程序·uni-app
小徐_23336 天前
Wot UI 2.2.0 发布:Button 新增 subtle,VideoPreview 预览体验继续增强
前端·微信小程序·uni-app