关于前端:微信小程序软键盘引起页面上移

微信小程序里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  })},