uniapp 键盘覆盖了弹窗中的input 怎么办
时间: 2023-12-07 11:05:46 浏览: 97
ios12中遇到的带input弹窗的错位问题的解决方法
可以尝试使用uni-app官方提供的插件uni-popup来解决这个问题。
1. 首先在页面中引入uni-popup插件:
```js
import uniPopup from '@/components/uni-popup/uni-popup.vue'
```
2. 在页面中添加一个uni-popup组件,并设置其属性:
```html
<uni-popup v-model="popupShow" :position="position" :style="{ height: '150rpx' }">
<input type="text" placeholder="请输入内容" />
</uni-popup>
```
其中,popupShow为控制弹窗显示与隐藏的变量,position为弹窗位置(可选值为top、bottom、left、right、center),style为弹窗样式。
3. 在页面中添加一个点击事件,触发弹窗显示:
```js
onShowPopup() {
this.popupShow = true
}
```
4. 在页面中添加一个监听键盘高度变化的事件:
```js
onKeyboardHeightChange(e) {
if (e.height > 0) {
// 键盘弹起时,设置弹窗位置为top
this.position = 'top'
} else {
// 键盘收起时,设置弹窗位置为center
this.position = 'center'
}
}
```
5. 在页面的onLoad生命周期中添加监听键盘高度变化的事件:
```js
onLoad() {
uni.onKeyboardHeightChange(this.onKeyboardHeightChange)
}
```
这样就可以解决键盘覆盖弹窗中的input的问题了。
阅读全文