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就会给我们做这个工作。