uni-app微信小程序input输入框底部，键盘弹起页面整体上移怎么办？

本文共计790个文字，预计阅读时间需要4分钟。

目录

• 问题描述：
• 问题分析：
• 解决思路：
• 重点在这里！！！我踩坑被折磨很久的一个地方！！！一定要用 px！！！
• 总结：

问题描述：

最近的做了个客服聊天的功能，遇到一个问题如下：
在手机上点击聊天页底部的input框后，键盘弹起同时页面会整体上移，标题栏被顶上去了。如下图：

问题分析：

input 获取焦点时会自动调起手机键盘，设置 :adjust-position="true"，会导致键盘弹起时页面整体上移

解决思路：

• 设置使键盘弹起使页面不上移
• 设置输入框所在盒子为绝对定位
• 键盘弹起时获取键盘高度
• 设置输入框所在盒子的bottom的键盘高度

注意：我这里是将消息输入部分封装成了组件，引入到它所在的 view 里的，所以需要将键盘高度子传父传值给它所在的盒子，如果是在同一个文件中的话直接将获取到的键盘高度赋值给 bottom 就可以。