在開發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相關技術分享，結合計算機軟硬件及輔助設備零售領域的應用場景，注重實戰性與通用性。如有更多問題，歡迎在評論區交流討論。
