uniapp-微信小程序-底部输入框-键盘弹出样式问题

月光冷青衫2025-03-25 17:35

前言

该文章记录一下工作中遇到的一些问题，后续将会逐步增加，所有内容均从网上整理而来，加上自己得理解做一个整合，方便工作中使用。

一、需求

输入框聚焦时，弹出键盘时，页面整体往上移动，但是保留页面导航栏。

二、页面布局

三、解决方法

通过监听键盘事件，关闭输入框的adjust-position属性（开启时，页面自动往上推，但是会让页面导航栏也很往上）；监听事件获取到键盘的高度，将页面也向上移动键盘的高度(transform: translateY(-高度px))，这样能保证导航栏处于顶部正常位置。

js 复制代码

  
  //keyboardheightchange 监听键盘方法
  //:adjust-position="false" 键盘弹起时，关闭自动上推页面
  <textarea
    auto-height
    v-model="inputVal"
    cursor-spacing="0rpx"
    :adjust-position="false"
    @keyboardheightchange="keyboardheightchange"
  />

function keyboardheightchange(e) {
  heightVal.value = e.detail.height || 0;
}

四、遇到的问题

给页面移动时一个动画时间，transition：all 0.25s，结果导致键盘弹出后立马自动关闭。