Vue3 实现滚动条随着内容的增多自动往下滚动
vue3取消了this.$refs获取节点的功能,我们只需要直接定义一个与你绑定在盒子上的ref属性名的同名变量就能拿到这个盒子的信息了,通过watch监听数据的变化,使用nextTick在dom更新之后再调用scrollBottom方法把盒子的距顶部高度调整为盒子的滚动高度,因为我们设置了盒子的固定高度和y轴的自动滚动,因此页面上会显示出数据不断增加,但是一直显示最新一条的底部数据的效果,到此功
·
最近开发项目需要用到打印机,随着后台传回的数据会自动在屏幕上显示新增的数据,但是众所周知元素盒子不会随着滚动的内容增加而自动往下滚动,所以就产生了需求,思考之后实现了这个功能。
首先在需要实现的div盒子绑定上一个ref,名字随便定义,但是注意这个盒子需要设置固定高度和
overflow-y:auto样式,否则不会有滚动效果
<div class="execInfo" ref="containerRef">
<p v-for="(item,index) in data" v-html="item"></p>
</div>
<style>
.execInfo {
width: 100%;
height: 400px;
font-size: 16px;
line-height: 33px;
color:#606266;
overflow-y: auto;
}
</style>
vue3取消了this.$refs获取节点的功能,我们只需要直接定义一个与你绑定在盒子上的ref属性名的同名变量就能拿到这个盒子的信息了,通过watch监听数据的变化,使用nextTick在dom更新之后再调用scrollBottom方法把盒子的距顶部高度调整为盒子的滚动高度,因为我们设置了盒子的固定高度和y轴的自动滚动,因此页面上会显示出数据不断增加,但是一直显示最新一条的底部数据的效果,到此功能完成。
const containerRef = ref();
let data = reactive();
watch(()=>data.length,()=>{
nextTick(()=>{
scrollBottom();
});
})
const scrollBottom = ()=>{
containerRef.value.scrollTop = containerRef.value.scrollHeight;
}
这个功能并不难实现,只是在思考的过程中遇到点小波折让我觉得有必要记录一下
更多推荐
已为社区贡献1条内容
所有评论(0)