代码如下:
html代码:
<view class="chat-box" style="{{keyboardHeight != 0 ? 'bottom:' + keyboardHeight + 'px;' : ''}}" bindtap="keyboardClick">
<textarea auto-height class="chat-input" show-confirm-bar="{{false}}" bindfocus="focusInput" bindblur="bindblur" adjust-position="{{false}}" maxlength="70" value="{{textAreaValue}}" bindinput="bindTextarea" placeholder="请输入短信内容" />
<text class="chat_box_num">{{textAreaValue.length}}/70</text>
<view class="sendMsg" bindtap="sendSms">
发送
</view>
</view>
css代码:
.chat-box {
position: fixed;
left: 0;
width: calc(100% - 10rpx);
bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
background: #FFFFFF;
padding: 11rpx 25rpx;
display: flex;
align-items: center;
}
.chat_box_num {
position: absolute;
right: 88px;
bottom: 10px;
color: #9a9a9a;
font-size: 24rpx;
}
.chat-input {
/*width: calc(580rpx - 10rpx - 12rpx);*/
/*margin-right: 10rpx;*/
/*overflow: scroll;*/
/*background: #F4F4F4;*/
/*border-radius: 8rpx;*/
/*padding: 11rpx 24rpx;*/
width: calc(580rpx - 10rpx - 12rpx);
margin-right: 10rpx;
overflow: scroll;
background: #F4F4F4;
border-radius: 8rpx;
padding: 11rpx 24rpx 40rpx;
min-height: 44rpx!important;
}
.sendMsg {
padding: 12rpx 21rpx;
background: #007AFF;
border-radius: 6rpx;
border: 1rpx solid rgba(5, 5, 5, 0.08);
font-size: 27rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
text-align: center;
}
js代码:
focusInput(e) {
console.log('获取键盘', e)
setTimeout(() => {
if (!this.data.keyboardStatus) {
return
}
this.setData({
keyboardHeight: e.detail.height
})
}, 100)
},
bindblur(e) {
console.log('失去焦点', e)
this.setData({
keyboardHeight: 0
})
}
出现问题的手机型号: ios 13,软件版本: 15.5
微信版本号: 8.0.23
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
老哥,找到解决方案了么,iPhone x和13都有这个问题