app彈出軟鍵盤獲取鍵盤高度不准確的原因及導致底部定位的元素無法貼近鍵盤的問題


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)取消監聽鍵盤高度變化事件,避免內存消耗。


免責聲明!

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



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