您的位置:首页 > 娱乐 > 八卦 > uniapp uni-popup底部弹框留白 底部颜色修改 滚动穿刺

uniapp uni-popup底部弹框留白 底部颜色修改 滚动穿刺

2024/10/6 6:05:32 来源:https://blog.csdn.net/qq_27378951/article/details/141677797  浏览:    关键词: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。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com