- 发布：2026-11-12 17:43
- 更新：2026-11-12 17:43
- 阅读：60
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 11
HBuilderX类型： 正式
HBuilderX版本号： 5.34
手机系统： 全部
手机系统版本号： Android 16
手机厂商： 华为
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
<!-- 客服聊天 Demo 页 -->
<template>
<view class="container chatBg">
<!-- 顶部导航栏 -->
<uv-navbar title="飞利猫官方客服" :autoBack="true" :fixed="false" />
<!-- 聊天内容占位 -->
<view class="chat-content"></view>
<!-- 底部输入框 -->
<view class="chat-input-bar">
<view class="emoji-container">
<image class="icon-Img" :src="Imgurl + 'Chat/voice.png'"></image>
</view>
<view class="chat-input-container">
<input class="chat-input" type="text" placeholder="请输入" />
</view>
<view class="emoji-container">
<image class="icon-Img" :src="Imgurl + 'Chat/emoji.png'"></image>
</view>
<view class="emoji-container">
<image class="icon-Img" :src="Imgurl + 'Chat/more.png'"></image>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
const Imgurl = getApp().globalData.IMG_URL
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.chatBg {
background-color: #F3F4F6;
}
.chat-content {
flex: 1;
}
.chat-input-bar {
display: flex;
flex-direction: row;
align-items: center;
border-top: solid 1px #f5f5f5;
background-color: #f8f8f8;
gap: 15rpx;
padding: 15rpx 20rpx;
padding-bottom: calc(15rpx + env(safe-area-inset-bottom));
}
.chat-input-container {
flex: 1;
padding: 15rpx;
background-color: white;
border-radius: 10rpx;
}
.chat-input {
width: 100%;
font-size: 28rpx;
}
.emoji-container {
width: 58rpx;
height: 58rpx;
flex-shrink: 0;
}
.icon-Img {
width: 58rpx;
height: 58rpx;
}
</style>
<!-- 客服聊天 Demo 页 -->
<template>
<view class="container chatBg">
<!-- 顶部导航栏 -->
<uv-navbar title="飞利猫官方客服" :autoBack="true" :fixed="false" />
<!-- 聊天内容占位 -->
<view class="chat-content"></view>
<!-- 底部输入框 -->
<view class="chat-input-bar">
<view class="emoji-container">
<image class="icon-Img" :src="Imgurl + 'Chat/voice.png'"></image>
</view>
<view class="chat-input-container">
<input class="chat-input" type="text" placeholder="请输入" />
</view>
<view class="emoji-container">
<image class="icon-Img" :src="Imgurl + 'Chat/emoji.png'"></image>
</view>
<view class="emoji-container">
<image class="icon-Img" :src="Imgurl + 'Chat/more.png'"></image>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
const Imgurl = getApp().globalData.IMG_URL
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.chatBg {
background-color: #F3F4F6;
}
.chat-content {
flex: 1;
}
.chat-input-bar {
display: flex;
flex-direction: row;
align-items: center;
border-top: solid 1px #f5f5f5;
background-color: #f8f8f8;
gap: 15rpx;
padding: 15rpx 20rpx;
padding-bottom: calc(15rpx + env(safe-area-inset-bottom));
}
.chat-input-container {
flex: 1;
padding: 15rpx;
background-color: white;
border-radius: 10rpx;
}
.chat-input {
width: 100%;
font-size: 28rpx;
}
.emoji-container {
width: 58rpx;
height: 58rpx;
flex-shrink: 0;
}
.icon-Img {
width: 58rpx;
height: 58rpx;
} </style>
操作步骤：
点击底部输入框，键盘弹起，界面就被推上去了，加入代码:adjust-position="false"也是没用
点击底部输入框，键盘弹起，界面就被推上去了，加入代码:adjust-position="false"也是没用
预期结果：
正常弹出和安卓16版本一致
正常弹出和安卓16版本一致
实际结果：
页面上移
页面上移
bug描述：
手机系统更新后，当前Android版本更新到17，出现键盘弹出后输入框上移的问题，以前的老项目也是出现同样的问题，查看荣耀官方反馈是webview输入法是有更新，需要自行调整兼容。
