在开发uniapp应用时，iOS设备上input组件聚焦弹出软键盘后，经常会出现页面整体上移的问题，这不仅影响用户体验，还可能导致页面布局错乱。本文将详细分析问题成因，并提供一套完整的解决方案，确保input组件聚焦后弹出软键盘固定在软键盘上方，失去聚焦后能准确回到原始位置。
问题分析
在iOS设备上，当input组件获取焦点时，系统默认会滚动页面以确保输入框可见，但uniapp的部分页面结构（如使用flex布局或绝对定位）可能导致整个页面被推挤上移，而非仅局部滚动。尤其是在pages.json中配置了"style": { "navigationBarTitleText": "..." }的页面，若未正确处理窗口高度变化，易引发布局异常。
解决方案
以下步骤结合代码示例，帮助开发者有效解决该问题：
1. 禁用页面自动调整
在pages.json中针对iOS设备，可以尝试禁用页面的自动调整行为。在对应页面的style中添加：
`json
"app-plus": {
"softinputMode": "adjustResize"
}
`
但注意，adjustResize在iOS上可能效果有限，需配合其他方法。
2. 监听软键盘事件并手动控制位置
在页面脚本中，通过监听软键盘的弹出和收起事件，动态调整input组件的定位。使用uni.onKeyboardHeightChange监听高度变化：
`javascript
export default {
data() {
return {
keyboardHeight: 0,
originalPosition: 0
}
},
onLoad() {
// 记录原始滚动位置
this.originalPosition = window.pageYOffset;
// 监听键盘高度变化
uni.onKeyboardHeightChange(res => {
this.keyboardHeight = res.height;
if (res.height > 0) {
// 键盘弹出时，将input组件滚动到可视区域
this.scrollToInput();
} else {
// 键盘收起时，恢复原始位置
window.scrollTo(0, this.originalPosition);
}
});
},
methods: {
scrollToInput() {
// 获取input组件位置并滚动到软键盘上方
const query = uni.createSelectorQuery().in(this);
query.select('#myInput').boundingClientRect(res => {
if (res) {
const inputTop = res.top;
const scrollTop = inputTop - (window.innerHeight - this.keyboardHeight) + 50; // 50为调整余量
window.scrollTo(0, scrollTop);
}
}).exec();
}
},
onUnload() {
// 移除监听
uni.offKeyboardHeightChange();
}
}
`
3. 使用CSS固定布局
在模板中，将input组件包裹在一个固定定位的容器内，确保其始终位于屏幕底部，软键盘弹出时自动上推：
`html
`
脚本中需同步更新keyboardHeight，并在onBlur时重置为0。
- 兼容性与优化
- 安卓设备：通常无需额外处理，因安卓软键盘默认调整窗口大小。
- 滚动穿透：可在input聚焦时禁用页面滚动，通过
@touchmove.stop阻止事件冒泡。
- 测试建议：在真机iOS环境下全面测试，尤其是全面屏设备，确保布局稳定。
###
通过结合配置调整、事件监听和CSS布局，可以有效解决uniapp在iOS设备上input组件软键盘导致的页面上移问题。关键点在于主动控制滚动行为，而非依赖系统默认处理。开发者应根据实际项目结构选择合适方案，或混合使用以上方法，以提升应用交互体验。
本文参考了番茄salad的博客及CSDN相关技术分享，结合计算机软硬件及辅助设备零售领域的应用场景，注重实战性与通用性。如有更多问题，欢迎在评论区交流讨论。
