--- highlight: a11y-dark --- **一.存在的问题：** 微信小程序聊天界面，当input 框获取焦点时会自动调起手机键盘，当键盘弹起时，会导致页面整体上移，页面头信息会消失不见。 **二.需要实现的效果** 1. 键盘弹出时，底部的输入框跟随键盘上弹； 2. 页面头固定在顶部不动; 3.聊天信息区域（即内容区）调整高度，该区域局部滚动; ##### 效果图对比 ![3.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6752f607a024461495c6cf4fc9404df6~tplv-k3u1fbpfcp-watermark.image?) #### 三.解决思路 1. 设置使键盘弹起使页面不上移； 2. 设置输入框所在盒子为绝对定位； 3. 键盘弹起时获取键盘高度； 4. 设置输入框所在盒子的bottom的键盘高度； 5. 清除输入框固定定位导致的浮动（在输入框盒子的上面盒子下方设置padding-bottom【高度与输入框相同】；或者在输入框所在盒子上面加一个块级元素【高度与输入框相同】） **注意：** 我这里是将消息输入部分封装成了组件，引入到它所在的【view】里的，所以需要将键盘高度子传父传值给它所在的盒子，如果是在同一个文件中的话直接将获取到的键盘高度赋值给【bottom】就可以。 #### 四.实现代码 **1.子组件input** ```js //子组件 // 添加失去焦点键盘隐藏事件 //重点在这里！！！一定要用 px！！！ methods: { inputBindFocus(e) { // 获取手机键盘的高度，赋值给input 所在盒子的 bottom 值 // 注意!!! 这里的 px 至关重要!!! 我搜到的很多解决方案都没有说这里要添加 px this.$emit('changeBottomVal' , e.detail.height + 'px') }, inputBindBlur( { // input 失去焦点，键盘隐藏，设置 input 所在盒子的 bottom 值为0 this.$emit('changeBottomVal', 0) }, } ``` **2.父组件引用** ```js /**清除浮动**/

``` #### 五.总结：由于获取的系统的尺寸单位都是 px ，给 bottom 设置的值单位也一定要是 px ! 不能因为是手机端就用 rpx，2倍的 rpx 也不可以，因为并不是每个手机分辨率都是我们设计图上375的2倍，一定要用 px 啊！