vue div框消息不断增加自动滚动到底部

最新推荐文章于 2024-08-09 11:20:59 发布

原创最新推荐文章于 2024-08-09 11:20:59 发布 · 869 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

这篇博客详细介绍了如何在 Vue.js 应用中实现聊天记录的实时更新和自动滚动到底部的功能。通过监听滚动事件和设置数据更新后的回调，确保当新消息到来时，滚动条始终位于聊天框的底部，从而提供无缝的用户体验。

<template>
<div class="consoleBox">
					<div class="curentScroll" v-for="(item,index) in debugProcessList" :key="index" style="line-height: 30px;">{{item.createTime}} &nbsp;&nbsp;&nbsp;{{item.content}}</div>
				</div>
</template>

export default {
    name: 'parkScreen',
    data() {
        return {
        oldScrollTop:0,
			scrollFlag:true,
}
       },
  mounted() {
        var that = this;
		//监听滚动事件
	    document.querySelector(".consoleBox").addEventListener('scroll',this.scrolling)
	    //初始化数据 此处可以通过setInterval 来不断增加数据 也可通过websockt来不断的增加数据 达到有数据就滚动到底部的效果
	    this.getUpdataData()
	   },
 methods: {   
 getUpdataData(){
			let that=this
			let robotId=1
			//获取数据---根据实际情况自己获取数据
			getDebugRecord({tobotId:robotId}).then(res => {
				if(res.rows.length>0){
					that.debugProcessList=[]
					that.debugProcessList=res.rows
				}
			})
			
			//调用保持滚动条方法（这一步也可以在updated生命周期调用）
			if(this.scrollFlag){
				this.scrollToBottom();
			}
		},
	//滚动条保持最底部方法
		scrollToBottom () {
			this.$nextTick(() => {
				var container = this.$el.querySelector(".consoleBox");
				container.scrollTop = container.scrollHeight;
			})
		},
		scrolling() {
			let scrollTop = document.querySelector(".consoleBox").scrollTop 
			// 更新——滚动前，滚动条距文档顶部的距离
			let scrollStep = scrollTop - this.oldScrollTop;
			this.oldScrollTop = scrollTop;
			//判断当前是向上or向下滚动
			if (scrollStep < 0) {
				//向上
				this.scrollFlag=false
			}else{
				this.scrollFlag=true
			} 
		},
}