小程序仿微信聊天input框的处理思路

最近做了个项目,是在小程序中仿微信聊天的,其中Input框遇到的坑有2个:

1.当Input框fixed或者absolute在底部的时候,我们输入内容时,键盘弹起会导致input的光标移位
2.当我们聊天记录只有一两条的时候,键盘顶起了页面,那两条聊天记录就会被顶起看不到了

首先我先解决input光标移位的问题

其实只要Input框不是通过定位放在底部,就不会出现键盘顶起后,光标移位的问题了.我是通过计算
屏幕高度 - 输入框的高度 = 展示消息列表的高度(scroll-view)
这样,我们的input框就可以保证一直在底部,键盘顶起不会导致光标移位

然后就是当我们聊天记录只有一两条的时候,键盘顶起了页面,那两条聊天记录就会被顶起看不到的问题

1.这里我把小程序的adjust-position设为false不让键盘顶起页面
2.然后键盘会挡住了我们的聊天页面的一部分,以及输入框,我们可以通过获取键盘的高度,动态设置我们聊天记录的高度
聊天记录的高度 = 屏幕高度 - 键盘高度 - 输入框的高度
scroll-top设置滚动条在底部
使得我们的输入框刚好在键盘上方,信息只有一两条的时候不会被键盘顶起看不到