小程序
小游戏
企业微信
微信支付
扫描小程序码分享
键盘弹起,提高消息输入框的高度,android第一次抬起的高度直接到了屏幕顶部,第二次就正常了,ios上一切正常;代码如下:
<view class="bottomBox" style="padding-bottom: {{keyBoardHeight}};">
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
请问您解决了吗
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
let keyBoardHeight = toString(this.data.bottomHeight) + 'px'
// keyBoardHeight = '0px'
console.log('onShow keyBoardHeight', keyBoardHeight);
this.setData({
keyBoardHeight //将键盘的高度设置到data中,后续可以通过它来修改定位textarea的bottom,使它弹起或者收起
})
wx.onKeyboardHeightChange(res => { //监听键盘高度变化
this.keyBoardChange(res.height)
console.log('---res.height', res.height);
})
this.getReportDetail()
},
keyBoardChange(height) {
var that = this
//键盘高度改变时调用
if (this.data.first) { //弹起时第一次的数据是错误的,所以不需要修改keyBoardHeight
this.setData({
first: false //将first改为false表示不是第一次调用
})
} else {
let keyBoardHeight = (height + this.data.bottomHeight) + 'px'
// keyBoardHeight = height + 'px'
console.log('keyBoardChange keyBoardHeight', keyBoardHeight);
this.setData({
keyBoardHeight //将键盘的高度设置到data中,后续可以通过它来修改定位textarea的bottom,使它弹起或者收起
})
if (keyBoardHeight === '0px') {
this.setData({
showTextara: false //键盘高度等于0时,隐藏textarea
})
}
}
},
<view class="bottomBox" style="padding-bottom: {{keyBoardHeight}};">
<!-- <view class="bottomBox" style="margin-bottom: {{keyBoardHeight}};"> -->
<view class="sendCommentBox">
<textarea class="commentText" value="{{inputComment}}" bindinput="bzInput" wrap="off" maxlength="100" placeholder="小小鼓励,大大的力量" confirm-type="send" disable-default-padding="0"></textarea>
<view class="cleanBnt" bindtap="clickClean">
<image class="commentCancelImg" src="../../images/叉叉.png"></image>
</view>
</view>
<button class="sendBnt" bindtap="clickSend">发送</button>
</view>
.bottomBox {
width: 100%;
height: 88rpx;
background-color: white;
display: flex;
align-items: center;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom);
position: fixed;
box-shadow: 0rpx 0rpx 8rpx 0rpx #a5a5a5;
z-index: 10;
}
请问您解决了吗