分享最实用的技术,创造更大的价值

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

微信小程序开发自定义头部bar后input软键盘弹起时页面整体上移解决方法


经过创软小程序开发团队的检查测试,发现在微信小程序textarea的属性上增加: cursor-spacing 属性即可,如:

<textarea  cursor-spacing='10' maxlength="-1" ></textarea>



网上找的其它文章,解决小程序键盘弹出遮挡顶部bar有一下方法做参考:


1,设置adjust-position属性(详细参见小程序官方文档)

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


2,通过以上设置,键盘弹出时整体页面不上移,接下来就需要获取到软键盘的高度,为页面添加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,真机上才有


联系
QQ
电话
咨询电话:189-8199-7898
TOP