微信小程序van-field键盘不上推,如何做到键盘和输入框 上推

微信小程序van-field聚焦后设置了键盘不上推页面,但是想把输入框上移在键盘上面,做了很多样式设置不出来,不知道哪里出了问题,这个样式该怎么设置呢?
目前做的效果:

img


目标效果

img

输入框代码



发送


方便写示例就没有引用van-field,这里使用的是原生组件,应该是共通的。
参考文档
https://developers.weixin.qq.com/miniprogram/dev/api/device/keyboard/wx.onKeyboardHeightChange.html
https://developers.weixin.qq.com/miniprogram/dev/component/input.html

Page({
  data: {
    height: 0
  },
  onLoad() {
    wx.onKeyboardHeightChange((res) => {
      this.setData({ height: res.height })
    })
  },
})
<view class="footer" style="bottom:{{height}}px">
  <input type="text" adjust-position="{{false}}" placeholder="请输入要发送的消息" />
</view>
.footer {
  position: fixed;
  bottom: 0px;
  transition: bottom .2s ease-in-out;
  padding: 20rpx 32rpx;
  background-color: #f5f5f5;
  width: 100%;
  box-sizing: border-box;
}

.footer input {
  background-color: #fff;
  border-radius: 6rpx;
  padding: 10rpx 12rpx;
}

img

https://developers.weixin.qq.com/s/hRF1TLmh7ZB8