vue中内容展示保持在最底部(scroll到最底部)

在尝试使用vue搭建微信时，发现微信在进入对话界面的时候，界面总能定位在最后一条对话上，无论是否打开键盘。

思路

（1）想单用样式来解决，发现使用绝对定位(position:absolute)是解决不了的
（2）后来对输入框加了个focus事件，监听获取焦点的时候对内容区域进行处理，但是键盘弹出有延迟，需要加setTimeout做延迟处理。效果不理想，而且未考虑刚进入时也要定位最底部聊天。
（3）mounted时就滚动到最底部，同时对window.onresize进行监听，效果还算理想。

进入聊天界面展示最近的聊天信息.jpg 弹出键盘后仍然定位在最近聊天信息位置.jpg

<template>
    <div class="chatCont" ref="chatMain"></div>
</template>

mounted(){
    this.$refs.chatMain.scrollTop = this.$refs.chatMain.scrollHeight
    // 监听window的resize事件
    window.onresize = () => {
        this.$refs.chatMain.scrollTop = this.$refs.chatMain.scrollHeight
    }
}

后记

后来旁边的小朋友给了个更简单的方案,使用自定义指令。注意下使用v-scroll的位置，不要放在ul这种包裹整个内容的标签上，而是用在需要一直定位在最底部的元素上。

<div class="chatCont">
    <ul>
    <li v-for="(item,index) in messageList" :key="index">
        <div v-if="item.sendObject === 0">
        <span class="time" v-if="item.sendTime"><i>{{item.sendTime}}</i></span>
        <p class="clearfix me" v-scroll>  //使用位置
            <img src="../../static/images/avatar/me.jpg" alt="">
            <span>{{item.sendMsg}}</span>
        </p>
        </div>
        <div v-if="item.sendObject === 1">
        <span class="time" v-if="item.sendTime"><i>{{item.sendTime}}</i></span>
        <p class="clearfix friend" v-scroll>  //使用位置
            <img :src="singleChatData.headUrl" alt="">
        <span>{{item.sendMsg}}</span>
        </p>
        </div>
    </li>
    </ul>
</div>

directives: {
    scroll: {
        inserted(el) {
            el.scrollIntoView()
        }
    }
}