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。