uni-app 配置 manifest 中 app-plus.softinput.mode 为 adjustPan 打包自定义基座后,安卓 onKeyboardHeightChange 事件失效
uni-app 配置 manifest 中 app-plus.softinput.mode 为 adjustPan 打包自定义基座后,安卓 onKeyboardHeightChange 事件失效
项目属性 | 信息 |
---|---|
产品分类 | uniapp/App |
PC开发环境操作系统 | Windows |
PC开发环境操作系统版本号 | 11 |
HBuilderX类型 | 正式 |
HBuilderX版本号 | 4.29 |
手机系统 | Android |
手机系统版本号 | Android 15 |
手机厂商 | 华为 |
手机机型 | huawei_phone |
页面类型 | vue |
vue版本 | vue3 |
打包方式 | 云端 |
项目创建方式 | HBuilderX |
示例代码:
<template>
<view class="content">
<input class="input" placeholder="请输入" />
</view>
</template>
<script>
export default {
onLoad() {
// 全局键盘高度监听事件
uni.onKeyboardHeightChange(res => this.showToast(`uni.onKeyboardHeightChange: ${res.height}`))
},
methods: {
showToast(title) {
uni.showToast({
title,
icon: 'none',
})
},
}
}
</script>
操作步骤:
配置 manifest
中 app-plus.softinput.mode
配置为 adjustPan
,云端打包自定义基座
预期结果:
onKeyboardHeightChange
可以监听键盘高度
实际结果:
onKeyboardHeightChange
不触发回调
bug描述:
配置 manifest
中 app-plus.softinput.mode
配置为 adjustPan
云端打包自定义基座后,安卓中 onKeyboardHeightChange
事件失效
去掉后打包, 自定义基座就可以监听到
如果不配置,android 偶尔会出现键盘消失时,下面会出现黑块,设置adjustPan后暂未出现黑块,但是会监听不到键盘高度变化
解决了吗
回复 NightMing: 没有,一直监听不到
在 uni-app 中配置 manifest.json
的 app-plus.softinput.mode
为 adjustPan
时,确实可能会导致 onKeyboardHeightChange
事件在安卓设备上失效。adjustPan
模式通常用于确保输入框不会被软键盘遮挡,而 onKeyboardHeightChange
事件则用于监听软键盘高度变化,这在一些需要动态调整布局的场景中非常有用。
当 softinput.mode
设置为 adjustPan
时,系统可能会调整页面内容以避免遮挡,但这并不总是触发软键盘高度变化事件。如果你需要在这种模式下仍然获取软键盘高度,可以考虑以下几种替代方案或调整:
方案一:使用自定义监听逻辑
由于 onKeyboardHeightChange
事件失效,你可以尝试通过监听页面滚动或输入框焦点变化来间接获取软键盘高度。不过,这种方法较为复杂且不一定准确。
方案二:调整 softinput.mode
配置
如果可能,考虑将 softinput.mode
从 adjustPan
改为 adjustResize
。在 adjustResize
模式下,软键盘弹出时会改变视图的可视区域大小,这通常会触发 onKeyboardHeightChange
事件。
修改 manifest.json
:
"app-plus": {
"softinput": {
"mode": "adjustResize"
}
}
方案三:手动计算软键盘高度(不推荐,但可行)
如果以上方案不适用,你可以尝试通过监听页面高度变化来手动计算软键盘高度。这种方法依赖于页面的布局和滚动情况,可能不够稳定。
示例代码(Vue 组件内):
export default {
data() {
return {
screenHeight: 0,
windowHeight: 0,
keyboardHeight: 0
};
},
mounted() {
this.screenHeight = window.screen.height;
this.windowHeight = window.innerHeight;
window.addEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
this.windowHeight = window.innerHeight;
this.keyboardHeight = this.screenHeight - this.windowHeight;
console.log('Keyboard height:', this.keyboardHeight);
}
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
}
};
请注意,这种方法依赖于窗口大小的变化,如果页面中有其他动态改变高度的元素,可能会导致计算不准确。
综上所述,推荐首先尝试调整 softinput.mode
配置为 adjustResize
,这是最直接且通常有效的方法。如果确实需要使用 adjustPan
,则可能需要更复杂的逻辑来间接获取软键盘高度。