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。

相关推荐
web_Hsir6 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir6 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa7 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
耶啵奶膘10 小时前
uni-app:firstUI框架的选择器Select改造,添加一个搜索的插槽
前端·uni-app
程序猿看视界1 天前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
清晨細雨1 天前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送
_未知_开摆1 天前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
Li_na_na011 天前
解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
android·pdf·uni-app·html5
web_Hsir1 天前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++
平凡的阿泽1 天前
uniapp编译的app在ios上内存泄漏了
uni-app