场景:聊天小程序,底部有一个输入对话框,聚焦对话框时会调起键盘,调起键盘默认会上移页面
可以通过adjust-position属性可以做到不上移页面,文档:
但是这样会造成一些问题:
- 输入框也不会上移了
- 聊天内容多的时候,键盘会遮挡聊天内容
输入框上移问题
我的解决方案就是设置对话框绝对定位,通过 bindkeyboardheightchange事件,在调起键盘和收起键盘时拿到键盘高度,然后设置对话框的bottom为键盘高度。
bindkeyboardheightchange解释:
代码就写关键的地方
wxml:
<view class="container">
<!-- 头部工具栏 -->
<view class="header"></view>
<!-- 聊天内容 -->
<view class="body"></view>
<!-- 对话框 有输入框textarea 和 发送按钮-->
<view class="chatInput" style="bottom:{{keyboradHeight}}px">
<textarea
model:value="{{content}}"
auto-height
bindkeyboardheightchange="keyboardheightchange"
></textarea>
<view class="send"></view>
</view>
</view>
js:
Page({
data:{
keyboradHeight:0,
content:"",
},
keyboardheightchange(e){
let {keyboradHeight}=this.data
if(keyboradHeight!==e.detail.height){
this.setData({
keyboradHeight:e.detail.height
})
}
}
})
wxss:
.container{
position:relative;
}
.chatInput{
position:absolute;
}
键盘遮挡聊天内容
我的解决方案就是动态给聊天框一个padding-bottom,初始值为对话框的高度,调起键盘的时候值就是对话框的高度+键盘的高度
padding-bottom = InputHeight + keyboradHeight
wxml:
<view class="container">
<!-- 头部工具栏 -->
<view class="header"></view>
<!-- 聊天内容 -->
<view class="body" style="padding-bottom:{{inputHeight + keyboradHeight}}px"></view>
<!-- 对话框 有输入框textarea 和 发送按钮-->
<view class="chatInput" style="bottom:{{keyboradHeight}}px">
<textarea
model:value="{{content}}"
auto-height
bindkeyboardheightchange="keyboardheightchange"
></textarea>
<view class="send"></view>
</view>
</view>
js:
Page({
data:{
keyboradHeight:0,
inputHeight:0,
content:"",
},
keyboardheightchange(e){
let {keyboradHeight}=this.data
if(keyboradHeight!==e.detail.height){
this.setData({
keyboradHeight:e.detail.height
})
}
},
getInputHeight(){
wx.createSelectorQuery()
.select(".chatInput")
.boundingClientRect(res=>{
this.setData({InputHeight:res.height})
}).exec()
}
onLoad(){
this.getInputHeight()
}
})
wxss:
.container{
position:relative;
display:flex;
flex-direction:column;
}
.body{
flex:1;
box-sizing: border-box;
}
.chatInput{
position:absolute;
}