uniapp在移動端軟鍵盤監聽(彈出,收起),及影響定位布局的問題


參考:https://www.cnblogs.com/wangyihong/p/7514304.html

問題:通過絕對定位或者固定定位設置底部按鈕,在虛擬鍵盤彈起時,底部按鈕會被頂到虛擬鍵盤上方。

方法一:最簡單的,給按鈕使用相對定位,單按鈕肯定無法固定在屏幕底部了,沒人挑毛病就可湊合用。

方法二:還是絕對定位或固定定位,給輸入框來個監聽,@focus聚焦則隱藏按鈕,@blur失焦則顯示按鈕。但是安卓手機,鍵盤收起時輸入框不會立刻失焦,鍵盤完全收起后過幾秒才失焦,有個時間差,這方法就不完美。

方法三:監聽鍵盤的高度,uniapp里面提供了uni.onKeyboardHeightChange監聽鍵盤高度的方法,在頁面加載的時候創建監聽器。如果把監聽器放在@blur上,第一次失焦還是會有時間差的。這辦法在頁面顯示上還是很完美的,but還是會有問題,根據uniapp社區里有人反饋,onKeyboardHeightChange這個監聽器在頁面退出的時候不會銷毀,重新進入頁面的時候還會再創建一個新的監聽器,直到應用退出才銷毀。好像說把hbuilder版本升級后這個bug會解決。

另:uniapp里還有個屬性,官方文檔:https://uniapp.dcloud.io/collocation/pages?id=app-plus

配置app-plus{
softinputMode: adjustResize

}

 

20210322更新:

最近做的項目又碰到了這個問題,uniapp開發的app應用。目前安卓機和蘋果機沒發現底部按鈕會定位失效的情況。具體怎么解決的真有點忘記了,把目前可能有關的地方貼出來:

1、pages.json的頁面配置

"app-plus": {
"softinputMode": "adjustPan"
}

2、 頁面上輸入框位置屬性position: relative;按鈕位置屬性position: absolute;

輸入框加上adjust-position屬性<input type="text" :adjust-position="false"/>

 

官方文檔參考:https://uniapp.dcloud.io/component/input?id=input

 

關於產生問題的原因:

蘋果手機在鍵盤彈起后,頁面應該會重新計算下?導致絕對定位/相對定位的按鈕重新去計算bottom的位置。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM