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

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

布局

首先先假设页面的布局,布局不一样,解决方案也不一样。以经典的底部输入框为例,我选择flex布局,好处是各部分高度自然伸缩,比定位布局方便不少。
微信小程序软键盘引起页面上移_第1张图片

方案

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

    ...


    



js事件

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

你可能感兴趣的