這段時間一直在利用uniapp做聊天室的功能，這里分享下發送新消息，接收新消息怎么像QQ那樣滾動加載。

首先我是查了一下網上的朋友，看了下大多都是使用scroll-top實現的，所以我也試了一下這個東西，確實可以實現，但是他獲取dom的速度著實讓人著急，而且不大適用加載歷史記錄，因為太慢了，我不知道網友是不是有更好的方式加載聊天記錄，我這邊不管怎么加載都會延遲一會，所以會跳動一下，看著讓人著實難受，所以我是寫了一個opacity延遲一會再顯示，讓人看起來舒服一點，

好了，上邊純屬瞎扯，進入正題，我這里使用也是scroll-view這個組件，不過我是用是scroll-into-view錨點的方式加載歷史數據，分頁，發送消息以及新消息，歷史數據和分頁我是直接加載的沒有使用動畫滾動，發送和新消息使用了滾動，動畫是否使用用的是 :scroll-with-animation="animation"這個鬼東西控制的，上代碼。

<scroll-view id="scrollview" @scroll="chatScroll" class="chat-window" :scroll-y="true" :style="{'max-height': style.contentViewHeight + 'px'}":scroll-with-animation="animation" @scrolltoupper="scrolltouppe" :scroll-into-view="toView" >

然后在你聊天記錄里搞個id，animation是在data里定義的布爾值，這里我舉個例子，代碼太多就不復制

<view v-for="(item,index) in ForchatData" > 這里是你的消息內容，圖片，語音，文字等等吧。 <view style="height: 40upx;clear: both;" :id="'toView'+index"></view> ID就是寫在上邊就可以，當然你也可以寫在循環上邊的標簽，不過我試了一下，因為錨點大家都知道是跳到標簽的上邊框，所以如果寫在上邊就會出現底下部分被遮蓋，所以寫在最后比較好點 </view>

然后現在就可以使用了，注意這里因為歷史記錄加載過慢，所以剛加載的時候你需要寫在nextTick里面，如下

that.$nextTick(function() {setTimeout(() => {that.contentViewMain(); }, 20) })

這里以防萬一我又加了一個延遲，不影響。 看下contentViewMain里面寫的什么，如下：

contentViewMain() {let that = this;that.toView = ""that.$nextTick(function() {that.toView = "toView" + (that.ForchatData.length - 1)})},

首先我這里先寫了一個that.toView =
“”，因為你直接改that.toView他默認不變，所以先置空再賦值就有作用了，that.ForchatData這個東西就是你的消息數據，因為上邊咱們提到只在有新消息和發送才會啟動動畫，所以加載歷史消息之前咱的that.animation
= false;，然后在發文字，發圖片，發語音這些之前再that.animation = true;并且調用下咱的錨點函數this.contentViewMain()就可以實現滾動發送新消息了。

這樣會比scroll-top省很多代碼。兼容性的話，安卓我是真機測試沒啥問題，ios還沒測。我看uniapp對于scroll-into-view并沒有寫兼容問題，另外說下一個小問題，就是上邊不管用scroll-top還是scroll-into-view，真機上上拉分頁的時候都會先跳到頂部再回來，這點很讓人頭疼，等解決這個問題再補上。

總結

以上是生活随笔為你收集整理的uniapp聊天室动画加载新消息的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。