VUE实现消息更新自动滚动到页面最底部

实现思路:

利用侦听器,监听实时刷新的消息列表数据是否改变,侦听到改变之后,利用 $nextTick() 方法 (这个方法的作用是延时执行,会在数据渲染页面之后执行),获取到聊天模块的高度,然后自动下滑获取到的高度。

实现代码:

watch: {
	messageList() {
		console.log("messageList change");
		this.$nextTick(() => {
			var h = $(".chat-list").innerHeight();
			$(".chatbox").scrollTop(h);
		})
	}
},

 

上一篇:vue3.0 nextTick()刷新组件


下一篇:vue中的nextTick