問題產(chǎn)生的原因
一般安卓的 webview 在觸發(fā)輸入法時會把容器切半,而ios的 webview 是直接頂上去
一開始滩字,我是用fixed定位造虏,發(fā)現(xiàn)不行又去找微信 input 組件的屬性去設(shè)置
你會發(fā)現(xiàn)不論怎么設(shè)置定位高度或者 input 的屬性都沒有效果,解決這個問題最好是有一個事件觸發(fā)麦箍,重新計算聊天內(nèi)容的高度
解決問題的核心
就是觸發(fā)input的點(diǎn)擊事件漓藕,獲取到e.mp.detail.height
//由于我們是用mpvue開發(fā)的,我就不用微信的寫法了挟裂,思路就是這么個思路
<div>
//聊天內(nèi)容享钞,用 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>