adjust-position設置為false,然后監聽鍵盤的高度賦值給輸入框bottom
這里還一個非常重要的地方,在根元素設置@touchmove.stop.prevent,這樣在ios上頁面就不會滾動,不影響其他組件內部滾動
onReady() {// 監聽鍵盤高度變化,以便設置輸入框的高度uni.onKeyboardHeightChange(res => {this.inputOffsetBottom = res.heightif (res.height === 0) {this.focus = false}})
},<inputv-model="commentValue":style="{bottom: inputOffsetBottom > 0 ? inputOffsetBottom + 'px' : '0'}":disabled="setDisabled":adjust-position="false":cursor-spacing="20":placeholder="placeholderText"type="text"class="lp-comment-input"confirm-type="send"@focus="onInputFocus"@blur="onInputBlur"@confirm="onInputEnter"@keyboardheightchange="onKeyBoardHeightChange"
/>
一,頁面結構設計
先來看看聊天頁面結構設計,外層布局如下:
<template><view><!-- 消息列表 --><scroll-view class="msg-list" scroll-y="true"></scroll-view><!-- 底部輸入欄 --><view class="input-box"><input :adjust-position="false"/></view></view>
</template>?
之后底部這個輸入欄,我們不要使用fixed定位,而是直接按照文檔流排列,那如何讓輸入欄一直在最下面呢,這就是我們下一步操作啦。
注意:這里的input或者textarea需要設置一個:adjust-position="false"的屬性,不然頁面就會上推
二,定義消息列表高度
我們需要獲取屏幕高度,然后使“消息列表”的高度為屏幕高度減去底部輸入欄高度
<!-- ...... --><!-- 消息列表 --><scroll-view class="msg-list" scroll-y="true" :style={ height: msgListHeight }></scroll-view>
<!-- ...... -->?
onLoad() {// 獲取並設置屏幕高度uni.getSystemInfo({success: res => {this.screenHeight = res.windowHeight// 100為底部輸入欄高度,單位rpx,需要先轉成pxthis.msgListHeight = this.screenHeight - uni.upx2px(100)}})
}
?
三,監聽鍵盤高度變化事件
下一步,需要監聽鍵盤高度變化事件,并且動態設置消息列表高度
onReady() {// 監聽鍵盤高度變化,以便設置輸入框的高度uni.onKeyboardHeightChange(res => {let keyBoardHeight = res.height// 100為底部輸入欄高度,單位rpx,需要先轉成pxthis.msgListHeight = this.screenHeight - keyBoardHeight - uni.upx2px(100)})
},
四,優化
做到以上三步一般可以解決上面頁面上推問題,剩下的就是不同項目不同的優化方案啦。
?
-------------------------------------------------------------------------
?
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,這個時候就會出現負值,所以需要判斷下
?