做底部弹框的时候,可能出现以下场景需要处理。
一、出现底部留白不是白色,需要修改颜色的时候:
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。