在開發(fā)uniapp應(yīng)用時，iOS設(shè)備上input組件聚焦彈出軟鍵盤后，經(jīng)常會出現(xiàn)頁面整體上移的問題，這不僅影響用戶體驗(yàn)，還可能導(dǎo)致頁面布局錯亂。本文將詳細(xì)分析問題成因，并提供一套完整的解決方案，確保input組件聚焦后彈出軟鍵盤固定在軟鍵盤上方，失去聚焦后能準(zhǔn)確回到原始位置。
問題分析
在iOS設(shè)備上，當(dāng)input組件獲取焦點(diǎn)時，系統(tǒng)默認(rèn)會滾動頁面以確保輸入框可見，但uniapp的部分頁面結(jié)構(gòu)（如使用flex布局或絕對定位）可能導(dǎo)致整個頁面被推擠上移，而非僅局部滾動。尤其是在pages.json中配置了"style": { "navigationBarTitleText": "..." }的頁面，若未正確處理窗口高度變化，易引發(fā)布局異常。
解決方案
以下步驟結(jié)合代碼示例，幫助開發(fā)者有效解決該問題：
1. 禁用頁面自動調(diào)整
在pages.json中針對iOS設(shè)備，可以嘗試禁用頁面的自動調(diào)整行為。在對應(yīng)頁面的style中添加：
`json
"app-plus": {
"softinputMode": "adjustResize"
}
`
但注意，adjustResize在iOS上可能效果有限，需配合其他方法。
2. 監(jiān)聽軟鍵盤事件并手動控制位置
在頁面腳本中，通過監(jiān)聽軟鍵盤的彈出和收起事件，動態(tài)調(diào)整input組件的定位。使用uni.onKeyboardHeightChange監(jiān)聽高度變化：
`javascript
export default {
data() {
return {
keyboardHeight: 0,
originalPosition: 0
}
},
onLoad() {
// 記錄原始滾動位置
this.originalPosition = window.pageYOffset;
// 監(jiān)聽鍵盤高度變化
uni.onKeyboardHeightChange(res => {
this.keyboardHeight = res.height;
if (res.height > 0) {
// 鍵盤彈出時，將input組件滾動到可視區(qū)域
this.scrollToInput();
} else {
// 鍵盤收起時，恢復(fù)原始位置
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為調(diào)整余量
window.scrollTo(0, scrollTop);
}
}).exec();
}
},
onUnload() {
// 移除監(jiān)聽
uni.offKeyboardHeightChange();
}
}
`
3. 使用CSS固定布局
在模板中，將input組件包裹在一個固定定位的容器內(nèi)，確保其始終位于屏幕底部，軟鍵盤彈出時自動上推：
`html
`
腳本中需同步更新keyboardHeight，并在onBlur時重置為0。
- 兼容性與優(yōu)化
- 安卓設(shè)備：通常無需額外處理，因安卓軟鍵盤默認(rèn)調(diào)整窗口大小。
- 滾動穿透：可在input聚焦時禁用頁面滾動，通過
@touchmove.stop阻止事件冒泡。
- 測試建議：在真機(jī)iOS環(huán)境下全面測試，尤其是全面屏設(shè)備，確保布局穩(wěn)定。
###
通過結(jié)合配置調(diào)整、事件監(jiān)聽和CSS布局，可以有效解決uniapp在iOS設(shè)備上input組件軟鍵盤導(dǎo)致的頁面上移問題。關(guān)鍵點(diǎn)在于主動控制滾動行為，而非依賴系統(tǒng)默認(rèn)處理。開發(fā)者應(yīng)根據(jù)實(shí)際項(xiàng)目結(jié)構(gòu)選擇合適方案，或混合使用以上方法，以提升應(yīng)用交互體驗(yàn)。
本文參考了番茄salad的博客及CSDN相關(guān)技術(shù)分享，結(jié)合計算機(jī)軟硬件及輔助設(shè)備零售領(lǐng)域的應(yīng)用場景，注重實(shí)戰(zhàn)性與通用性。如有更多問題，歡迎在評論區(qū)交流討論。
