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。

相关推荐
anyup15 小时前
uni-app 蓝牙打印:实现数据分片传输机制
前端·uni-app·trae
fakaifa17 小时前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
Monly211 天前
Uniapp:navigator(页面跳转)
uni-app
Monly212 天前
Uniapp:swiper(滑块视图容器)
uni-app
七七小报2 天前
uniapp-商城-32-shop 我的订单-订单详情和组件goods-list
uni-app
Monly212 天前
Uniapp:view容器(容器布局)
uni-app
上趣工作室2 天前
uniapp开发2--uniapp中的条件编译总结
uni-app
@泽栖2 天前
下载HBuilder X,使用uniapp编写微信小程序
微信小程序·小程序·uni-app
程序员王天2 天前
Uniapp 自定义TabBar + 动态菜单实现教程(Vuex状态管理详解)
微信小程序·uni-app
卡尔特斯2 天前
Uniapp 控制台日志工具(DZMUniappConsoleLog)
前端·uni-app