uniapp开发H5页面时，操作按钮底部固定，点击输入框键盘弹起导致按钮位置上移，如下图
微信图片_20220224174107.png
微信图片_20220224174117.png
uniapp提供的方法不生效，个人解决方法是通过监听键盘是否弹起，如果弹起就隐藏掉操作按钮，方法如下
<view class="bottom" v-if="show">
<text @click="cancel">取消</text>
<text @click="sure">立刻提交</text>
</view>
export default {
data() {
return {
show: true,
defaultPhoneHeight: '', //屏幕默认高度
nowPhoneHeight: '', //屏幕现在的高度
}
},
watch: {
//软键盘弹起事件
nowPhoneHeight() {
if (this.defaultPhoneHeight != this.nowPhoneHeight) {
//手机键盘被唤起了。
console.log('弹起');
//写软键盘唤起你需要做的操作
this.show = false
} else {
console.log('收起');
//手机键盘被关闭了。
//写软键盘关闭你需要做的操作
this.show = true
}
}
},
mounted() {
//监听软键盘获取当前屏幕高度的事件
this.defaultPhoneHeight = window.innerHeight
window.onresize = () => {
this.nowPhoneHeight = window.innerHeight
}
},
// 页面销毁一定要移除onresize时间
beforeDestroy() {
window.onresize = null
},
}
