微信小程序软键盘引起页面上移

微信小程序里input或textarea聚焦会唤起软键盘，如果输入框在软键盘以上没事，但如果在软键盘位置以下甚至贴着底部，整个页面就会被软键盘推上去。
有什么办法能让软键盘推着键盘上移，又不让页面被推上去呢。

布局

首先先假设页面的布局，布局不一样，解决方案也不一样。以经典的底部输入框为例，我选择flex布局，好处是各部分高度自然伸缩，比定位布局方便不少。

方案

• 将input的adjust-position属性设置为false，即不上推页面。
• 在输入框底下再加一个容器用来表示软键盘高度。
• 监听输入框focus，blur事件，e.detail.height就是软键盘高度

<scroll-view class="main flex-auto" scroll-y >
    ...
</scroll-view>
<view class="input flex-none">
    <input adjust-position="{{false}}" bind:focus="onInputFocus" bind:blur="onInputBlur" />
</view>
<!-- 软键盘高度 -->
<view class="bottom flex-none" style="{{keyboardHeight}}px">
</view>

js事件

onInputFocus(e) {
    if (e.detail.height) {
      this.setData({
        keyboardHeight: e.detail.height
      })
    }
},
onInputBlur() {
  this.setData({
    keyboardHeight: 0
  })
},