首页 > 其他 > 详细

vue 内容增加滚动条自动定位至底部

时间:2019-05-21 18:38:52      阅读:263      评论:0      收藏:0      [点我收藏+]
this.$nextTick(() => {
        document.body.scrollTop = document.body.scrollHeight;
        console.log(document.body.scrollTop);
});

 数据改变之后,DOM 并没有立即发生变化,所以 document.body.scrollTop 还是上一次 DOM更新之后的值。

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用。

再次修改之后的代码如下,可以实现自动定位到对话页面的底部,但是还有一个小问题,就是输入新的对话信息之后会出现闪屏的现象,可以通过设置延时来解决。

vue 内容增加滚动条自动定位至底部

原文:https://www.cnblogs.com/momo798/p/10901394.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!