解决微信小程序自定义头部后,软键盘弹起时页面整体上移

为input输入框添加属性

adjust-position

官方文档

<input value="{{value}}" bindinput="bindinput" confirm-type="send" adjust-position="{{inputUp}}" bindfocus="inputFocus" bindblur="inputBlur"></input>

这样在输入时键盘就不会定起页面,这时就只需要获取到软键盘的高度,为页面添加padding-bottom就好了。

获取键盘高度:

inputFocus(e) {
    console.log(e,'键盘弹起')
    var inputHeight = 0
    if (e.detail.height) {
      inputHeight = e.detail.height
    }
},
inputBlur() {
    console.log('键盘收起')
},

(在编辑器中e.detail中只有value,没有height,真机上才有)

猜你喜欢

转载自blog.csdn.net/weixin_43631810/article/details/86663614