微信小程序键盘遮挡底部输入框解决方案
微信小程序开发中,当页面底部有个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; }