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

设置后 (正常展示)

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

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>
<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,
},
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;
border-top: 2rpx solid #ECECEC;
z-index: 10;
}
亲测可用 有问题滴滴🙂