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

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

思路

（1）想单用样式来解决，发现使用绝对定位(position:absolute)是解决不了的

（2）后来对输入框加了个focus事件，监听获取焦点的时候对内容区域进行处理，但是键盘弹出有延迟，需要加setTimeout做延迟处理。效果不理想，而且未思考刚进入时也要定位最底部聊天。

（3）mounted时就滚动到最底部，同时对window.onresize进行监听，效果还算理想。

进入聊天界面展示最近的聊天信息.jpg

弹出键盘后依旧定位在最近聊天信息位置.jpg

<template> <divclass=”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这种包裹整个内容的标签上，而是用在需要一直定位在最底部的元素上。

<divclass=”chatCont”>    <ul>    <liv-for=”(item,index) in messageList”:key=”index”>        <divv-if=”item.sendObject === 0″>        <spanclass=”time”v-if=”item.sendTime”><i>{{item.sendTime}}</i></span>        <pclass=”clearfix me”v-scroll>  //使用位置

            <imgsrc=”../../static/images/avatar/me.jpg”alt=””>            <span>{{item.sendMsg}}</span>        </p>        </div>        <divv-if=”item.sendObject === 1″>        <spanclass=”time”v-if=”item.sendTime”><i>{{item.sendTime}}</i></span>        <pclass=”clearfix friend”v-scroll>  //使用位置

            <img:src=”singleChatData.headUrl”alt=””>        <span>{{item.sendMsg}}</span>        </p>        </div>    </li>    </ul></div>directives: {scroll:{inserted(el){el.scrollIntoView()}}}

原文链接地址：https://www.jianshu.com/p/2742d342efd8