微信小程序键盘遮挡底部输入框解决方案
微信小程序开发中,当页面底部有个fixed输入框时,如评论输入框。在使用中常常被弹出的键盘遮挡住。
如:
<view class="send-box" style="height:{{keyboardH}}+'px'" >
<view class="send-box-in">
<input bindkeyboardheightchange="keyboardheightchangeF" bindblur="blurF" adjust-position="{{false}}" />
</view>
</view>
.send-box {
position: fixed;
bottom: 0;
z-index: 999;
width: 100%;
left: 0;
height: 44px;
background-color: #f5f5f5;
}
1、使用adjust-position属性,将其设置为false,键盘弹起时,不自动上推页面;
2、通过bindkeyboardheightchange事件,获取当前键盘的高度;并设置keyboardH的值;光标离开输入框,bindblur事件触发时恢复高度,动态设置元素的高度来避免输入框被键盘遮挡。
keyboardheightchangeF: function (e) {
console.log("键盘高度");
console.log(e.detail.height);
this.setData({
keyboardH:e.detail.height + 44
})
},
blurF: function () {
this.keyboardH = 44;
}