微信小程序通过获取键盘高度解决键盘弹出挡住输入框问题

我在这里写了个输入名称的头 在电脑上看着这输入效果还是挺优秀的

但当真的运行在手机上时 就会发现 这键盘一弹出来 就挡住我们的输入框了

这里 我们可以这样实现

在data中定义一个数值类型 叫 focusHeight

然后 给我们弹层 加上一个固定定位

然后 通过 focusHeight来控制它与界面底部的距离

这个变量默认是 0

然后 给输入框绑定一个bindkeyboardheightchange事件

bindkeyboardheightchange是一个小程序官方事件 用于监听键盘高度的变化

我们这里就可以在这个事件中 将键盘高度赋值给focusHeight

获取 event 下的 detail 下的 height 这三次 任何一个拿不到就直接赋值0
然后将结果赋值给focusHeight

然后 我们再次运行
这个就可以按键盘高度 设置与底部距离 从而在键盘上面了