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

749 阅读1分钟

对比前后

未设置 ( 与自定义头部重叠 页面整体上移 )

image.png

设置后 (正常展示)

image.png

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

image.png

2. 通过以上设置,键盘弹出时整体页面不上移,接下来就需要获取到软键盘的高度,为页面添加padding-bottom即可 。

如下面这段代码:
index.wxml
   <!-- 底部 -->
        <view class="bottom-operate-box" style="padding-bottom:{{inputHeight+'px'}}">
            <view style="padding-left: 32rpx;box-sizing: border-box;">
                <input class="comment-input" cursor-spacing="8" adjust-position="{{false}}" 
                value="{{ comment }}" focus="{{ isFocus }}" placeholder="留下你的评论吧" type="text"
                confirm-type="send" bindconfirm="commentConfirm" bindinput="commentInput" 
                bindfocus="inputFocus" bindblur="inputBlur" placeholder-class="placeholder" />
            </view>
    <!-- 点赞, 评论的icon图标 可参考上面 ui -->
            <view style="display: flex;padding-right: 32rpx;">
                <text bindtap="toPraise" wx:if="{{ detailInfo.praiseInfo.includeCurrentUser }}" class="iconfont icondianzanxuanzhong m-r-48"></text>
                <text bindtap="toPraise" wx:else class="iconfont icondianzan m-r-48"></text>
                <text bindtap="toComment" class="iconfont iconpinglun m-r-48"></text>
            </view>
        </view>

index.js
     data: {
        inputHeight: 34, //默认位置
    },
     // 获取焦点给paddingBottom 设置当前键盘高度,失去焦点再恢复默认即可。
      inputFocus(e) {
        console.log(e, '键盘弹起, 获取键盘高度')
        if (e.detail.height) {
            this.setData({
                inputHeight: e.detail.height,
            })
        }
    },
    inputBlur() {
        this.setData({
            inputHeight: 34,
        })
    },
index.wxss
// 其他样式就不粘贴了  
.bottom-operate-box {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 104rpx;
    background: #FFFFFF;
    align-items: center;
    /* justify-content: center; */
    border-top: 2rpx solid #ECECEC;
    z-index: 10;
}
亲测可用 有问题滴滴🙂