adjust-position設(shè)置為false，然后監(jiān)聽(tīng)鍵盤(pán)的高度賦值給輸入框bottom

這里還一個(gè)非常重要的地方，在根元素設(shè)置@touchmove.stop.prevent，這樣在ios上頁(yè)面就不會(huì)滾動(dòng)，不影響其他組件內(nèi)部滾動(dòng)

onReady() {
  // 監(jiān)聽(tīng)鍵盤(pán)高度變化，以便設(shè)置輸入框的高度
  uni.onKeyboardHeightChange(res => {
    this.inputOffsetBottom = res.height
    if (res.height === 0) {
      this.focus = false
    }
  })
},

<input
  v-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"
/>

一，頁(yè)面結(jié)構(gòu)設(shè)計(jì)
先來(lái)看看聊天頁(yè)面結(jié)構(gòu)設(shè)計(jì)，外層布局如下：

<template>
?? ?<view>
?? ??? ?<!-- 消息列表 -->
?? ??? ?<scroll-view class="msg-list" scroll-y="true">
?? ??? ?</scroll-view>
?? ??? ?
?? ??? ?<!-- 底部輸入欄 -->
?? ??? ?<view class="input-box">
?? ??? ??? ?<input :adjust-position="false"/>
?? ??? ?</view>
?? ?</view>
</template>?

之后底部這個(gè)輸入欄，我們不要使用fixed定位，而是直接按照文檔流排列，那如何讓輸入欄一直在最下面呢，這就是我們下一步操作啦。

注意：這里的input或者textarea需要設(shè)置一個(gè):adjust-position="false"的屬性，不然頁(yè)面就會(huì)上推

二，定義消息列表高度
我們需要獲取屏幕高度，然后使“消息列表”的高度為屏幕高度減去底部輸入欄高度

<!-- ...... -->
?? ?<!-- 消息列表 -->
?? ?<scroll-view class="msg-list" scroll-y="true" :style={ height: msgListHeight }>
?? ?</scroll-view>
<!-- ...... -->?

onLoad() {
?? ?// 獲取並設(shè)置屏幕高度
?? ?uni.getSystemInfo({
?? ??? ?success: res => {
?? ??? ??? ?this.screenHeight = res.windowHeight
?? ??? ??? ?// 100為底部輸入欄高度，單位rpx，需要先轉(zhuǎn)成px
?? ??? ??? ?this.msgListHeight = this.screenHeight - uni.upx2px(100)
?? ??? ?}
?? ?})
}

?
三，監(jiān)聽(tīng)鍵盤(pán)高度變化事件
下一步，需要監(jiān)聽(tīng)鍵盤(pán)高度變化事件，并且動(dòng)態(tài)設(shè)置消息列表高度

 
onReady() {
?? ?// 監(jiān)聽(tīng)鍵盤(pán)高度變化，以便設(shè)置輸入框的高度
?? ?uni.onKeyboardHeightChange(res => {
?? ? ? ?let keyBoardHeight = res.height
?? ? ? ?// 100為底部輸入欄高度，單位rpx，需要先轉(zhuǎn)成px
?? ??? ?this.msgListHeight = this.screenHeight - keyBoardHeight - uni.upx2px(100)
?? ?})
},
 

四，優(yōu)化
做到以上三步一般可以解決上面頁(yè)面上推問(wèn)題，剩下的就是不同項(xiàng)目不同的優(yōu)化方案啦。
?

-------------------------------------------------------------------------

3、遇到問(wèn)題
　　當(dāng)我獲取鍵盤(pán)高度定位時(shí)，發(fā)現(xiàn)底部定位的元素總是跟軟鍵盤(pán)間隔一段距離。安卓和ios手機(jī)均是如此。就如這樣：

4、問(wèn)題原因
　　這是因?yàn)槭謾C(jī)屏幕底部存在虛擬鍵位，虛擬鍵位是占了軟鍵盤(pán)高度，占了屏幕高度，但是不占屏幕可使用窗口高度的

5、解決方案
　　知道了原因，其實(shí)問(wèn)題就很好解決了。

　　uni.getSystemInfo(OBJECT)：獲取系統(tǒng)信息。

　　我們可以通過(guò)該接口獲取到系統(tǒng)信息里的：screenHeight（屏幕高度）、windowHeight（可使用窗口高度）

　　兩者相減即為虛擬鍵位高度：keyHeight = screenHeight - windowHeight

　　然后獲取到的軟鍵盤(pán)高度 減去 虛擬鍵位高度即可得到定位的高度

setKeyHeight(obj) {
　　let _sysInfo = uni.getSystemInfoSync()
　　let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
　　let _diff = obj.height - _heightDiff
　　this.keyHeight = _diff > 0 ? _diff : 0
?
　　在iphone上有這樣的問(wèn)題，就是上面的obj.height在鍵盤(pán)隱藏時(shí)為0，這個(gè)時(shí)候就會(huì)出現(xiàn)負(fù)值，所以需要判斷下
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-636580.html

到了這里，關(guān)于uniapp點(diǎn)擊輸入框時(shí)鍵盤(pán)不上推頁(yè)面的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！