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

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

思路

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

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

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

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

后记

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

    

    

        

        {{item.sendTime}}
        
  //使用位置
            
            {{item.sendMsg}}
        
        
        

        {{item.sendTime}}
        
  //使用位置
            
        {{item.sendMsg}}
        
        
    
    


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