uni-app小程序软键盘弹起会顶起页面
时间: 2023-09-23 16:10:15 浏览: 405
软键盘顶起页面布局
在uni-app小程序中,当软键盘弹起时,会导致页面整体上移,页面头信息会消失不见。为了实现键盘弹出时底部输入框跟随键盘上弹的效果,可以通过监听输入框的获取焦点事件和失去焦点事件来调整页面布局。
在子组件的input标签中,添加了获取焦点事件inputBindFocus和失去焦点事件inputBindBlur。在inputBindFocus事件中,通过获取手机键盘的高度,将其赋值给输入框所在盒子的bottom属性。这样就可以实现输入框跟随键盘上弹的效果。而在inputBindBlur事件中,将输入框所在盒子的bottom属性设置为0,实现键盘隐藏时输入框回到原来的位置。
需要注意的是,在赋值给bottom属性时,必须加上单位px,这一点非常重要。
除了调整输入框的位置,还可以通过设置页面头部信息为固定位置来避免其被键盘遮挡。这样即使键盘弹起,页面头部信息也会保持在顶部固定不动。
综上所述,uni-app小程序中,可以通过监听输入框的获取焦点事件和失去焦点事件来实现键盘弹起时底部输入框跟随键盘上弹的效果,同时保持页面头部信息固定在顶部位置。
阅读全文