參考: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的位置。
