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

Question

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

目标效果

输入框代码



发送

Answer 1

方便写示例就没有引用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;
}

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