vue项目组件中滚动条无法调整位置解决办法

今天做项目遇到的一个问题,普通的HTML里面给滚动条定位的时候,直接是两步走

1、var box=document.getElementById("box");

2、box.scrollTop=box.scrollHeight;
但是公司项目却是vue项目,所以这样写不生效,在控制台查看scrollTop属性始终是0。

最终翻了很多网页终于找到了答案:this.$nextTick

简单的介绍下$nextTick:

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 。

既然$nextTick是在下次DOM更新时执行的,那正好用。

果然是成功把滚动条定位到底部。

       总结一下就是    如果我们想对未来更新后的视图进行操作,我们只需要把要执行的函数传递给this.$nextTick方法,vue就会给我们做这个工作。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章