vue 傳送訊息聊天框傳送最新的訊息永遠再最底部

2022-06-11 11:54:11 字數 409 閱讀 8530

今天在寫這個需求的時候 直接就用了

element.scrolltop = element.scrollheight

發現最後總數會差一點畫素到最底部

每次滾動條沒有滑動到最底部,而是底部還有一條資訊被隱藏

問題分析:

由於vue採用虛擬dom,我每次生成新的訊息時獲取到的div的scrollheight的值是生成新訊息之前的值,所以造成每次都是最新的那條訊息被隱藏掉了!為了論證我的分析是正確的特意做個試驗,把每次vue在重新渲染dom的前後時間點和div的scrollheight列印出來以做對比:

確實有偏差

使用 this.$nexttick()就好了

vue聊天框傳送表情

1.在傳送訊息的時候,判斷傳送的訊息是不是表情,表情的type 3,content 愛心 這樣儲存在資料庫中 2.在獲取聊天記錄的時候,判斷type 3,處理表情,else if chatitem.type 3 src emojiurl emojimap chatitem.content style...

同步方式的訊息傳送和非同步方式的訊息傳送

通訊有兩類不同的基本方式 具有依時性的同步方式以及與時間無關的非同步方式。訊息傳送中介軟體有許多不同型別,它們分別都能夠支援一類基本方式的訊息通訊,有時可以支援兩類方式。根據定義,同步執行的特徵為 在兩個通訊應用系統之間必須要進行同步,兩個系統必須都在正常執行,並且會中斷客戶端的執行流,轉而執行呼叫...

同步方式的訊息傳送和非同步方式的訊息傳送

通訊有兩類不同的基本方式 具有依時性的同步方式以及與時間無關的非同步方式。訊息傳送中介軟體有許多不同型別,它們分別都能夠支援一類基本方式的訊息通訊,有時可以支援兩類方式。根據定義,同步執行的特徵為 在兩個通訊應用系統之間必須要進行同步,兩個系統必須都在正常執行,並且會中斷客戶端的執行流,轉而執行呼叫...