当前位置: 首页 > Web前端 > JavaScript

微信小程序软键盘导致页面上移

时间:2023-03-27 17:07:13 JavaScript

微信小程序中input或textarea的焦点会唤起软键盘。如果输入框在软键盘的上方还好,但是如果在软键盘的位置下方甚至贴在底部,整个页面就会塌陷。被软键盘推上去。有什么办法可以让软键盘把键盘推上去而不让页面上推。布局首先假设页面的布局,布局不一样,解决方案也不一样。以经典的底部输入框为例,我选择了flex布局。优点是各部分高度自然可伸缩,比定位布局方便多了。该方案将input的adjust-position属性设置为false,即页面不上推。在输入框下面再添加一个容器,用来表示软键盘的高度。监听输入框的focus和blur事件,e.detail.height是软键盘的高度...js事件onInputFocus(e){if(e.detail.height){this.setData({keyboardHeight:e.detail.height})}},onInputBlur(){这个。setData({keyboardHeight:0})},