uniapp 监听键盘的高度变化

### Vue3 和 UniApp 中监听键盘弹起高度的解决方案 在 Vue3 和 UniApp 的开发环境中，可以采用多种方法来监听软键盘的高度变化并处理相应的界面调整问题。以下是具体的实现方式： #### 方法一：使用 `@/utils/keyboardHeight` 工具类 如果项目中有现成工具类用于监听键盘高度的变化，则可以直接引入该模块进行操作[^1]。 ```javascript import keyboardListener from "@/utils/keyboardHeight"; // 添加键盘高度变化监听器 keyboardListener.onKeyboardHeightChange(({ height, extra }) => { console.log("键盘高度：", height); console.log("额外高度（iOS）：", extra); // 可在此处更新页面布局逻辑 }); // 当组件销毁时移除监听器 onUnmounted(() => { keyboardListener.offKeyboardHeightChange(); }); ``` 此方法适用于已有封装好的工具库场景，能够快速集成到现有项目中。 --- #### 方法二：利用原生 API 实现键盘高度监听 对于未提供专用工具的情况，可借助 `Window.visualViewport` 或其他事件机制手动捕获软键盘触发的行为[^2]。 ##### H5 端实现思路 通过监听页面可视区域 (`visualViewport`) 的尺寸变化检测软键盘弹出与否。 ```javascript let initialHeight = window.innerHeight; function onResize() { const currentHeight = window.innerHeight; const keyboardHeight = initialHeight - currentHeight; if (keyboardHeight > 0) { console.log(`键盘已弹起，高度为 ${keyboardHeight}px`); } else { console.log("键盘已收起"); } } window.addEventListener('resize', onResize); // 组件卸载时清理事件监听 onUnmounted(() => { window.removeEventListener('resize', onResize); }); ``` 这种方法依赖于浏览器对 `resize` 事件的支持程度，在部分老旧设备上可能需要额外适配。 --- #### 方法三：UniApp 提供的内置 API 针对移动端应用开发，推荐优先考虑 UniApp 自带功能完成需求。例如可通过 `onKeyboardHeightChange` 生命周期钩子获取动态数据[^2]。 ```javascript export default { data() { return { keyboardHeight: 0, }; }, methods: { handleKeyboardChange(e) { this.keyboardHeight = e.height || 0; console.log(`当前键盘高度为 ${this.keyboardHeight} px`); }, }, onLoad() { uni.onKeyboardHeightChange(this.handleKeyboardChange); }, onUnload() { uni.offKeyboardHeightChange(this.handleKeyboardChange); }, }; ``` 以上代码片段展示了如何绑定全局范围内的键盘状态改变回调函数，并及时同步至内部变量存储以便后续调用。 --- #### 封装与复用建议 为了提高代码质量以及降低维护成本，强烈建议将上述任意一种技术打包成为独立服务层或者插件形式发布出去共享给团队成员重复利用。 比如创建名为 `useKeyboardHeight.js` 的组合式 API 文件如下所示： ```javascript import { ref, onMounted, onUnmounted } from 'vue'; export function useKeyboardHeight() { const keyboardHeight = ref(0); const updateHeight = ({ height }) => { keyboardHeight.value = height; }; onMounted(() => { uni.onKeyboardHeightChange(updateHeight); }); onUnmounted(() => { uni.offKeyboardHeightChange(updateHeight); }); return { keyboardHeight }; } ``` 随后只需简单导入即可享受便捷体验： ```javascript <script setup> import { useKeyboardHeight } from '@/composables/useKeyboardHeight'; const { keyboardHeight } = useKeyboardHeight(); console.log(keyboardHeight); // 动态反映实时数值 </script> ``` --- ### 注意事项 - 不同平台间可能存在细微差异，请务必测试覆盖 Android/iOS/H5 多种环境。 - 若发现某些机型无法正常工作，尝试查阅官方文档寻找替代方案或联系技术支持寻求帮助。

在UniApp中，可以通过监听键盘的弹起事件来实现一些交互效果或者处理逻辑。以下是一种常见的监听键盘弹起的方法： 1. 在需要监听键盘弹起的页面的`onLoad`生命周期函数中，添加如下代码： ```javascript onLoad() { uni.onKeyboardHeightChange((res) => { // 键盘高度发生变化时触发的回调函数 console.log('键盘高度变化：', res.height); // 可以在这里处理键盘弹起时的逻辑 }); } ``` 2. 在页面销毁时，需要移除键盘弹起事件的监听，可以在`onUnload`生命周期函数中添加如下代码： ```javascript onUnload() { uni.offKeyboardHeightChange(); } ``` 这样就可以在UniApp中监听键盘的弹起事件了。当键盘高度发生变化时，会触发回调函数，并可以获取到键盘的高度信息。你可以根据实际需求，在回调函数中处理相应的逻辑。