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。

相关推荐
织_网1 天前
UniApp 快速集成个推推送(UniPush2.0)完整实战教程
uni-app
星星~笑笑1 天前
vue 超简单 oss分片上传文件 大文件上传阿里云
前端·javascript·vue.js·uni-app
jingling5552 天前
uni-app农场地图——高德 JS API 实现全解析(天地图影像作为layers)
uni-app
2501_916008892 天前
Mac 上生成 AppStoreInfo.plist 文件,App Store 上架
android·macos·ios·小程序·uni-app·iphone·webview
__zRainy__2 天前
uni-app 全局容器实战系列(四):全局容器动态调用设计
uni-app
2501_916007473 天前
iOS开发中抓取HTTPS请求的完整解决方法与步骤详解
android·网络协议·ios·小程序·https·uni-app·iphone
00后程序员张3 天前
Windows 下怎么生成 AppStoreInfo.plist?不依赖 Xcode 的方法
ide·macos·ios·小程序·uni-app·iphone·xcode
__zRainy__3 天前
uni-app 全局容器实战系列(二):Vite 虚拟模块
windows·uni-app
__zRainy__3 天前
uni-app 全局容器实战系列(一):全局容器的实现
uni-app·vite
安生生申3 天前
uni-app 连接 JDY-31 蓝牙串口模块实践
c语言·前端·javascript·stm32·单片机·嵌入式硬件·uni-app