当前位置:   article > 正文

uni-app中uni-popup组件居中弹出时,弹框被软键盘遮挡_uniapp uni-popup 出现系统键盘遮挡

uniapp uni-popup 出现系统键盘遮挡

开发场景:

使用uni-app开发微信小程序和app时,功能是:居中弹出的弹出框里面是个表单,运行在手机上时发现,弹框的一部分被input弹出的软键盘遮挡,视觉效果不好。

解决:

在page.json文件中,当前页面的style里设置: "softinputMode": "adjustResize"。那么在手机上运行时,弹框就在软键盘弹出时,自动上移。

PS:但是这个配置,只针对嵌套在app中时生效,在微信小程序里面没有这个配置。

补充:想要在微信小程序里实现类似效果,目前还没有看到更好的方法,目前只是在最后一个input的配置中加了:cursor-spacing="108",让最后一个输入框不被软键盘挡住。

cursor-spacing,值为number类型。是指:指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离。(我是取了input到popup弹框最底部的距离加了5px),虽然效果也没有很好,弹框不会在页面居中吧,但至少不会被挡住了。(PS:如果你的弹框里有多个input被遮挡的话,每一个都要添加)。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/668890
推荐阅读