前端开发聊天室（踩坑避坑）

简介：此文章为 简一 独立开发聊天室后遇到的一些问题（包括但不限于样式，逻辑等）记录，不止为了给后续想要开发聊天室的朋友们一些建议，还是为了自己能有一个印象，避免以后再次进行犯错

---

问题记录

样式问题：

1.输入法软键盘导致底部input框被覆盖

2.软键盘导致内容区错位并影响聊天记录查看

逻辑问题：

1.滚动无法关闭软键盘

2.在打开软键盘的时候切换表情或更多功能时出现动态效果视觉不好

---

问题解决方案

输入法软键盘导致底部input框被覆盖

我们可以在页面中进行软键盘事件监听进行处理

1.可以在onLoad中创建监听

 onLoad() {
	// 注册键盘显示事件监听器
	uni.onKeyboardHeightChange(this.onKeyboardShow);
},

2.在method中创建事件获取软键盘高度

onKeyboardShow(e) {
	// 处理键盘显示事件的逻辑
	console.log(this.statusBarHeight, e.height, '打印软键盘高度');
	const keyboardHeight = e.height;
	this.keyboardHeight = keyboardHeight
},

3.在 对应底部框位置 设置高度（此步骤只提供一种方法）

直接将底部框通过元素进行移位（内容区则是flex布局）

<view :style="`height: ${keyboardHeight}px;`">
</view>

我看到很多人使用固定定位（position: fixed;）进行操作 bottom（同理并不影响，使用哪种办法都可以）

软键盘导致内容区错位并影响聊天记录查看

此问题出现是因为内容区并没有进行自适应的操作

这里提供两种解决方法（flex布局，fixed定位）

1.通过底部框不同的高度进行内容区的高度设置（fixed定位处理方法）

定位方法，这里不提供样式代码，可以根据自己需要的动态效果在行内进行样式处理，相信可以达到不错的效果

2.通过flex布局（flex:1进行自适应操作）注意如果此时你开发的是app，则要在父级元素上进行高度设置，可通过 100vh - 对应高度 完成设置。

height: 100vh;
display: flex;
flex-direction: column;
//因我的头部导航使用的是uni自带的，所以直接使用100vh即可，
//但如果你们聊天的头部导航为自定义，则需要减去头部导航的内容高度

滚动无法关闭软键盘

正常来讲，在滑动页面时，我们需要将软键盘或其他表情底部栏关闭（不需要此需求则可以跳过）

我们可以通过 uni.hideKeyboard();

在对应时候进行软键盘隐藏，还可以进行其他操作，将表情或更多底部栏进行变量改变隐藏

onKeyboardHide(e) {
    // 处理键盘隐藏事件的逻辑
	if (this.keyboardHeight != 0) {
		uni.hideKeyboard(); //隐藏软键盘
	}
},

在打开软键盘的时候切换表情或更多功能时出现动态效果视觉不好

此问题，出现在进行切换底部框时，没有做到谁先出现谁先消失的效果，这里可以直接在函数种进行判断，在出现切换时，仅更新底部框的高度。