web前端技术博客
您当前的位置:web前端 > 微信小程序

微信小程序键盘遮挡底部输入框解决方案

作者:只会切图的前端 发布时间:2021-01-26 21:04:27 浏览量:62

微信小程序开发中,当页面底部有个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;
}

 

发表评论
验证码:

相关文章

    无相关信息
联系我
粤ICP备17092958号