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