vue进入聊天页面时,自动滚到页面的底部,亲测有效。

<ul ref="cgat-box">
   <li v-for="(chatmsg,chatindex) in chatlist" :key="chatmsgindex">
      .........
   </li>
</ul>

首先定义一个方法

scrollToButtom(){
    this.$nextTick(() => {
        let chatboxContainer = this.$refs.chatbox // 获取对
        if (chatboxContainer) {
            document.body.scrollTop = chatboxContainer.scrollHeight // 滚动高度
        }

    })

},

在mounted的生命周期函数执行

mounted(){
       this.getChatList()
    },
methods{
        //获取聊天记录的方法
        getChatList(){
           // ......省略请求的代码
             this.scrollToButtom()
        }
    },
上一篇:vue进页面input自动获取焦点


下一篇:vue 组件通信