微信小程序键盘弹起时,底部输入框抬起至键盘上方,顶部导航栏固定不动

一 . 需求描述 :

在微信小程序中,常见的页面布局是顶部导航栏和底部输入框固定不动,中间内容部分自适应。但是当键盘弹起时整个页面被挤压,导致元素上移或被覆盖,业务希望在这种情况下,输入框能自动抬起至键盘上方,顶部导航栏保持固定,不被顶上去。效果如图所示:

二 . 错误处理方案:

**方案1:**直接在textarea组件中设置cursor-spacing="100",这样当键盘弹时,输入框虽然在键盘上方,但是顶部导航栏也被顶上去了,效果如图一:

**方案2:**直接在textarea组件中设置adjust-position="{{false}}",这样当键盘弹起时,虽然顶部导航栏固定不动,但是底部输入框被键盘遮挡,效果如图二:

三 . 正确处理方案:

1.定义底部输入框外层view距离底部距离的变量inputBoxBottom:

css 复制代码
data:{
  inputBoxBottom:0
}

2.在页面的onLoad生命周期中监听键盘事件,记录键盘弹起的高度,并将高度赋值给inputBoxBottom

typescript 复制代码
 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,
    });
}

3.将inputBoxBottom变量设置给底部输入框外层的view标签:

ini 复制代码
<view class="input-box" style="bottom:{{inputBoxBottom}}px"></view>

4.设置textarea标签adjust-position="{{false}}",保证键盘弹起时,页面不会被顶起,只是底部输入框bottom变化而使输入框抬起至键盘上方:

css 复制代码
<textarea adjust-position="{{false}}" ></textarea>
相关推荐
林强1814 小时前
前端文件预览docx、pptx和xlsx
前端
像是套了虚弱散6 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan6 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇7 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15888 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追8 小时前
Vue组件化开发
前端·html
艾德金的溪9 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长9 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH9 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴9 小时前
Android Studio新手开发第二十六天
android·前端·android studio