小程序之即时聊天输入框定位问题

问题产生的原因

一般安卓的 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>