1、問題背景
在評論或者發布內容時經常會用到這樣的設計,輸入框彈起,然后底部定位的一塊區域(通常用於選擇一些附加信息,比如圖片、話題、表情等)也隨之彈起,定位在軟鍵盤上方方便用戶選擇。但是一般點擊輸入框,軟鍵盤自動彈起,就會覆蓋掉底部定位的元素,而我們是需要底部定位的元素跟隨軟鍵盤一起彈起的,這樣就方便用戶輸入的時候也可以選擇其他附加信息。
2、我們可以通過uniapp提供的接口獲取到軟鍵盤的高度
uni.onKeyboardHeightChange(CALLBACK):監聽鍵盤高度變化,返回參數就是:{ height: number類型,鍵盤高度 }
可以獲取到鍵盤高度,然后修改定位的bottom即可。
3、遇到問題
當我獲取鍵盤高度定位時,發現底部定位的元素總是跟軟鍵盤間隔一段距離。安卓和ios手機均是如此。就如這樣:
4、問題原因
這是因為手機屏幕底部存在虛擬鍵位,虛擬鍵位是占了軟鍵盤高度,占了屏幕高度,但是不占屏幕可使用窗口高度的
5、解決方案
知道了原因,其實問題就很好解決了。
uni.getSystemInfo(OBJECT):獲取系統信息。
我們可以通過該接口獲取到系統信息里的:screenHeight(屏幕高度)、windowHeight(可使用窗口高度)
兩者相減即為虛擬鍵位高度:keyHeight = screenHeight - windowHeight
然后獲取到的軟鍵盤高度 減去 虛擬鍵位高度即可得到定位的高度
setKeyHeight(obj) { let _sysInfo = uni.getSystemInfoSync() let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
let _diff = obj.height - _heightDiff this.keyHeight = _diff > 0 ? _diff : 0
在iphone上有這樣的問題,就是上面的obj.height在鍵盤隱藏時為0,這個時候就會出現負值,所以需要判斷下
6、注意內存泄漏
使用了uni.onKeyboardHeightChange(CALLBACK):監聽鍵盤高度變化,注意需要使用uni.offKeyboardHeightChange(CALLBACK):取消監聽鍵盤高度變化事件,避免內存消耗。