一、问题描述 首次进入聊天窗口,数据加载之后先显示最早消息,后显示最新消息,也就是数据加载完之后,延迟了一个时间滚动条才自动定位到最底部。 二、解决方案 如果数据在刚好加载完的时候滚动条就定位到了最底部就好了,就不会在进入聊天窗口之后还看到滚动条在往下滚动,出现的问题就是因为获取数据 ...
数据改变之后,DOM 并没有立即发生变化,所以 document.body.scrollTop 还是上一次 DOM更新之后的值。 Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。 nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用。 再次修改之后的代码如下,可以实现自动定位到对话页面的底部,但是还有一个小问题,就 ...
2019-05-21 17:57 0 1889 推荐指数:
一、问题描述 首次进入聊天窗口,数据加载之后先显示最早消息,后显示最新消息,也就是数据加载完之后,延迟了一个时间滚动条才自动定位到最底部。 二、解决方案 如果数据在刚好加载完的时候滚动条就定位到了最底部就好了,就不会在进入聊天窗口之后还看到滚动条在往下滚动,出现的问题就是因为获取数据 ...
css部分: html部分: js部分:js部分:(此处需要引入jquery.js) ...
import React,{Component } from 'react' import './App.css'; class App extends Component{ scr ...
...
...
private scrollToBottom() { this.$nextTick(() => { const container = this.$el.que ...