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

我在这里写了个输入名称的头 在电脑上看着这输入效果还是挺优秀的
微信小程序通过获取键盘高度解决键盘弹出挡住输入框问题_第1张图片
但当真的运行在手机上时 就会发现 这键盘一弹出来 就挡住我们的输入框了
微信小程序通过获取键盘高度解决键盘弹出挡住输入框问题_第2张图片
这里 我们可以这样实现

在data中定义一个数值类型 叫 focusHeight
微信小程序通过获取键盘高度解决键盘弹出挡住输入框问题_第3张图片
然后 给我们弹层 加上一个固定定位
微信小程序通过获取键盘高度解决键盘弹出挡住输入框问题_第4张图片
然后 通过 focusHeight来控制它与界面底部的距离
微信小程序通过获取键盘高度解决键盘弹出挡住输入框问题_第5张图片
这个变量默认是 0

然后 给输入框绑定一个bindkeyboardheightchange事件
微信小程序通过获取键盘高度解决键盘弹出挡住输入框问题_第6张图片
bindkeyboardheightchange是一个小程序官方事件 用于监听键盘高度的变化

我们这里就可以在这个事件中 将键盘高度赋值给focusHeight
微信小程序通过获取键盘高度解决键盘弹出挡住输入框问题_第7张图片
获取 event 下的 detail 下的 height 这三次 任何一个拿不到就直接赋值0
然后将结果赋值给focusHeight

然后 我们再次运行
这个就可以按键盘高度 设置与底部距离 从而在键盘上面了
微信小程序通过获取键盘高度解决键盘弹出挡住输入框问题_第8张图片

你可能感兴趣的:(微信小程序)