uniapp点击输入框时键盘不上推页面

adjust-position设置为false，然后监听键盘的高度赋值给输入框bottom

这里还一个非常重要的地方，在根元素设置@touchmove.stop.prevent，这样在ios上页面就不会滚动，不影响其他组件内部滚动

onReady() {
  // 监听键盘高度变化，以便设置输入框的高度
  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"
/>

一，页面结构设计
先来看看聊天页面结构设计，外层布局如下：

<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，需要先转成px
            this.msgListHeight = this.screenHeight - uni.upx2px(100)
        }
    })
}

 
三，监听键盘高度变化事件
下一步，需要监听键盘高度变化事件，并且动态设置消息列表高度

 
onReady() {
    // 监听键盘高度变化，以便设置输入框的高度
    uni.onKeyboardHeightChange(res => {
        let keyBoardHeight = res.height
        // 100为底部输入栏高度，单位rpx，需要先转成px
        this.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，这个时候就会出现负值，所以需要判断下