vue聊天功能之滾動條自動定位到底部
一、問題描述 首次進入聊天窗口,數據加載之后先顯示最早消息,后顯示最新消息,也就是數據加載完之后,延遲了一個時間滾動條才自動定位到最底部。 二、解決方案 如果數據在剛好加載完的時候滾動條就定位到了最底部就好了,就不會在進入聊天窗口之后還看到滾動條在往下滾動,出現的問題就是因為獲取數據 ...
數據改變之后,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 ...