Vue 日志监控自动滚屏

swinm

已于 2022-10-26 21:01:57 修改

阅读量2.8k

点赞数

分类专栏： Vue 文章标签： vue.js

于 2020-10-09 15:33:23 首次发布

原文链接：https://blog.youkuaiyun.com/qq_40557812/article/details/85051011

版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

<div class="chatBox-content-demo">
	<p>登录地址：美国</p>
	<p>登录地址：澳大利亚</p>
</div>

mounted () {
   this.scrollToBottom();
},
//每次页面渲染完之后滚动条在最底部
updated:function(){
   this.scrollToBottom();
},
methods:{
   scrollToBottom: function () {
     this.$nextTick(() => {
	    var container = this.$el.querySelector(".chatBox-content-demo");
        container.scrollTop = container.scrollHeight;
     })
}
}

vue生命周期: updated

不管是通过父组件props接收的数据还是组件本身data里的数据，只要在页面中使用这些数据，这些数据变化，都会触发组件的updated生命周期；如果数据不在页面中使用，那么不会触发组件的updated生命周期。

https://blog.youkuaiyun.com/qq_14993375/article/details/79336232?utm_source=blogxgwz1
https://blog.youkuaiyun.com/qq_40557812/article/details/85051011