uni-app中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被遮挡的话,每一个都要添加)。

你可以使用 `uni-popup` 组件来实现弹出层的效果。`uni-popup` 是 uni-app 框架的一个原生弹出组件,可以在页面创建一个弹出层,并控制其显示和隐藏。 首先,确保你已经在你的 uni-app 项目安装了 `uni-popup` 组件。可以通过以下命令安装: ``` npm install @dcloudio/uni-popup ``` 接下来,在需要使用弹出层的页面,引入 `uni-popup` 组件: ```vue <template> <view> <uni-popup :show="showPopup" @close="closePopup"> <!-- 弹出层的内容 --> </uni-popup> <!-- 其他页面内容 --> </view> </template> <script> import uniPopup from '@dcloudio/uni-popup' export default { components: { uniPopup }, data() { return { showPopup: false } }, methods: { openPopup() { this.showPopup = true }, closePopup() { this.showPopup = false } } } </script> ``` 在上述示例,我们创建了一个 `showPopup` 的 data 属性来控制弹出层的显示和隐藏。当点击打开弹出层的按钮,调用 `openPopup` 方法将 `showPopup` 设置为 `true`,弹出层将显示出来。当点击弹出层上的关闭按钮,会触发 `closePopup` 方法将 `showPopup` 设置为 `false`,弹出层将隐藏。 你可以根据需要自定义弹出层的内容,例如在 `<uni-popup>` 标签内添加你想要展示的内容。 这样就可以通过 `uni-popup` 组件来实现弹出层的效果了。记得根据实际情况调整代码,并在合适的机调用 `openPopup` 方法来显示弹出层。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值