仿微信、QQ聊天页面软键盘遮挡聊天对话的解决办法

最新推荐文章于 2024-01-12 09:29:53 发布

混度思绪

最新推荐文章于 2024-01-12 09:29:53 发布

阅读量1.5k

点赞数

分类专栏：小程序 uni-app 文章标签：小程序 uni-app

本文链接：https://blog.csdn.net/dasy_r/article/details/117982356

版权

在开发微信小程序和uni-app的聊天功能时，遇到弹出的软键盘会遮挡聊天对话的问题。通过研究代码，发现可以通过修改input框事件的值来解决。设置`adjust-position`为`true`，使得微信小程序在键盘弹起时自动上推页面，成功实现聊天界面不被键盘遮挡的效果。

摘要由CSDN通过智能技术生成

在刚制作的时候弹起来的软键盘会覆盖聊天记录
类似这样
在这里插入图片描述
然后我仔细研究了下代码

原代码：

//底部框代码
<view class="cu-bar foot input">
	<view class="action" @tap="call">
		<text class="cuIcon-phone text-grey"></text>
	</view>
	<view class="action" @tap="chooseImage">
		<text class="cuIcon-camera text-grey"></text>
	</view>
	<input v-model="content" class="solid-bottom" :adjust-position="false" :focus="false" maxlength="500"
		cursor-spacing="10" @focus="InputFocus" @blur="InputBlur"></input>
	<button