问题产生的原因
一般安卓的 webview 在触发输入法时会把容器切半,而ios的 webview 是直接顶上去
一开始,我是用fixed定位,发现不行又去找微信 input 组件的属性去设置
你会发现不论怎么设置定位高度或者 input 的属性都没有效果,解决这个问题最好是有一个事件触发,重新计算聊天内容的高度
解决问题的核心
就是触发input的点击事件,获取到e.mp.detail.height
//由于我们是用mpvue开发的,我就不用微信的写法了,思路就是这么个思路
<div>
//聊天内容,用 scroll-view 是他有 scroll-into-view 方法,一般都会有指定滚动到某个位置这个需求
//absolute定位,bottom: 60px; top需要计算
<scroll-view :style="focusTop ? focusTop : ''"></<scroll-view>
//输入框,absolute定位
<div>
<input @focus="onfocus" @blur="onBlur">
<button></button>
</div>
</div>
<script>
data(){
return {
focusTop: ''
}
},
method(){
onfocus(){
this.focusTop = 'top:'+ (e.mp.detail.height) + 'px'
},
onBlur(){
this.focusTop = "";
}
}
</script>