微信小程序底部输入框拉起键盘，上移页面

场景：聊天小程序，底部有一个输入对话框，聚焦对话框时会调起键盘，调起键盘默认会上移页面

可以通过adjust-position属性可以做到不上移页面，文档：

但是这样会造成一些问题：

1. 输入框也不会上移了
2. 聊天内容多的时候，键盘会遮挡聊天内容

输入框上移问题

我的解决方案就是设置对话框绝对定位，通过 bindkeyboardheightchange事件，在调起键盘和收起键盘时拿到键盘高度，然后设置对话框的bottom为键盘高度。

bindkeyboardheightchange解释：

代码就写关键的地方

wxml:

<view class="container">
  <!-- 头部工具栏 -->
  <view class="header"></view>
  <!-- 聊天内容 -->
  <view class="body"></view>
  <!-- 对话框  有输入框textarea 和 发送按钮-->
  <view class="chatInput" style="bottom:{{keyboradHeight}}px">
    <textarea 
        model:value="{{content}}" 
        auto-height
        bindkeyboardheightchange="keyboardheightchange"
    ></textarea>
    <view class="send"></view>
  </view>
</view>

js:

Page({
    data:{
        keyboradHeight:0,
        content:"",
    },
    keyboardheightchange(e){
        let {keyboradHeight}=this.data
        if(keyboradHeight!==e.detail.height){
            this.setData({
                keyboradHeight:e.detail.height
            })
        }
    }
})

wxss:

.container{
    position:relative;
}
.chatInput{
    position:absolute;
}

键盘遮挡聊天内容

我的解决方案就是动态给聊天框一个padding-bottom，初始值为对话框的高度，调起键盘的时候值就是对话框的高度+键盘的高度

padding-bottom = InputHeight + keyboradHeight

wxml:

<view class="container">
  <!-- 头部工具栏 -->
  <view class="header"></view>
  <!-- 聊天内容 -->
  <view class="body" style="padding-bottom:{{inputHeight + keyboradHeight}}px"></view>
  <!-- 对话框  有输入框textarea 和 发送按钮-->
  <view class="chatInput" style="bottom:{{keyboradHeight}}px">
    <textarea 
        model:value="{{content}}" 
        auto-height
        bindkeyboardheightchange="keyboardheightchange"
    ></textarea>
    <view class="send"></view>
  </view>
</view>

js:

Page({
    data:{
        keyboradHeight:0,
        inputHeight:0,
	content:"",
    },
    keyboardheightchange(e){
	let {keyboradHeight}=this.data
        if(keyboradHeight!==e.detail.height){
            this.setData({
                keyboradHeight:e.detail.height
            })
        }
    },
    getInputHeight(){
        wx.createSelectorQuery()
    	.select(".chatInput")
    	.boundingClientRect(res=>{
      		this.setData({InputHeight:res.height})
    	}).exec()
    }
    
    onLoad(){
        this.getInputHeight()
    }
})

wxss:

.container{
    position:relative;
    display:flex;
    flex-direction:column;
}
.body{
    flex:1;
    box-sizing: border-box;
}
.chatInput{
    position:absolute;
}