小程序-输入框跟随键盘弹起

当表单的 输入框在底部时,手机上要弹出键盘,必须把输入框往上弹,需要设置输入框height高度在键盘的位置。

将inputBoxBottom变量设置给底部输入框外层的view标签:
<view class="input-box" style="bottom:{{inputBoxBottom}}px"></view>
设置textarea标签adjust-position="{{false}}",保证键盘弹起时,页面不会被顶起,只是底部输入框bottom变化而使输入框抬起至键盘上方:
<textarea adjust-position="{{false}}" ></textarea>

onLoad(options: any) {
    wx.onKeyboardHeightChange((res) => {
      const height = res.height;
      if (height > 0) {
        this.onKeyboardShow(height);
      } else {
        this.onKeyboardHide();
      }
    });
  },
onKeyboardShow(height: number) {
    this.setData({
      inputBoxBottom: height,
    });
},
onKeyboardHide() {
    // 处理键盘收起逻辑
    this.setData({
      inputBoxBottom: 0,
    });
}

 

posted @ 2025-07-14 16:37  微宇宙  阅读(69)  评论(0)    收藏  举报