Vue中消息橫向滾動時,滾動速度越來越快的問題

hiYoHoo 發布于2019-08-26 10:57 / 1964人閱讀

摘要：解決方式當消息滾動到盒子邊緣銷毀定時器時將其賦值為，然后修改中央事件的事件監聽將其判斷沒有定時器的條件修改為然后滿足條件的調用消息滾動函數。

最近在做項目時,需要進行兩個組件聯動,一個輪詢獲取到消息,然后將其傳遞給另外一個組件進行橫向滾動展示,結果滾動的速度越來越快。這里記錄一下來提醒自己。消息滾動的代碼在最下面,方便下次使用。

問題背景: 最近在做一個需求,組件A獲取消息采用的是輪詢,組件A獲取到新的消息后,將組件A中的消息傳遞給另外一個組件B,當組件B接收到消息時就讓消息在頁面上滾動播放。

實現思路: 這個項目應用的框架為VUE,當組件A獲取到新的消息之后,就觸發中央事件總線,在組件B中進行事件監聽,將其添加進入一個數組,當判斷定時器沒有運動時,就觸發滾動的函數。消息滾動的函數是從消息數組中提取出第一條,然后利用定時器進行消息滾動,當消息滾動到邊緣時清除定時器。

問題:消息在滾動的過程中,該開始還能夠按照給定的速度進行滾動,可是當時間變長后就會出現消息滾動的速度越來越快的問題。

原因:當出現這個問題時,我第一個念頭就是setInterval沒有被清掉,因為當定時器沒有清掉之后又再次調用定時器就會導致多個定時器同時執行,比如第一次是一個計時器,再點一下是就是兩個定時器,這時候每次就是+2,所以速度不斷提升。我看了一下我設置的滾動函數,里面當消息滾動到邊緣時,就清除這個定時器,所以在滾動函數中沒有問題。我又看了下中央事件總線的事件監聽器,發現問題在這里。因為我在判斷一個定時器是否被銷毀時,直接判斷其類型是數字還是 null,由于當定時器開始運行時,每一次返回的都是一個ID(數字),而不是一開始的對象,導致當一條消息開始滾動時,又接收到一條新的消息,然后就使得兩個定時器同時運行,從而出現這個問題。

解決方式:當消息滾動到盒子邊緣銷毀定時器時,將其賦值為null，然后修改中央事件的事件監聽,將其判斷沒有定時器的條件修改為null,然后滿足條件的調用消息滾動函數。

橫向滾動的代碼:

云服務器 GPU云服務器 listview橫向滾動 js文字橫向滾動 asp表格橫向滾動 js圖片滾動速度

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106878.html

基于better-scroll的vue滾動組件

摘要：讓用戶可以滾動頁面。事件中拿到想要的后瀏覽器已經隱藏地址欄和工具欄，放開插件滾動。發現派發的方法在父組件中監聽后獲取位置參數的效果不太好必須要手指貼著滑動才可以這個設置為可以實時派發滾動事件和位置參數其他坑點待發現歡迎大佬一起交流寫在前面由于最近一個移動端項目中許多地方有滾動需求, 橫向,縱向的都有,所以就基于better-scroll封裝了一個通用的滾動組件,期間也踩了一些坑,有...

xiaotianyi 2019-08-23 18:09 評論0 收藏0
vueTable大數據展示優化

摘要：懶加載方式常見的有淘寶一屏用元素占據一定的高度，然后再去拉圖片數據。但這種方式還是需要元素占位，淘寶一頁的數據量其實不算大，因為它結合了分頁。背景 showImg(https://segmentfault.com/img/bVbhSVh?w=1606&h=440);大數據項目根據用戶輸入代碼查詢數據，用戶的代碼不可控（比如select from db limit 5000），有可能...

JasinYip 2019-08-23 12:15 評論0 收藏0
基于React與Redux的留言墻的實現

摘要：設計本次留言墻分為兩部分。活動展示部分為匿名留言墻形式后改為實名制，需要根據收到的留言墻進行向上平滑滾動，如果沒有消息接收則停止在最后一條消息上。主要為處理數據的數據層。背景由于某事業群需要留言墻用于年會，同時需要調用大象公眾號服務器接口，所以在今年年初開發了留言墻用于活動現場交流。設計本次留言墻分為兩部分。一部分為活動展示部分，另一部分為后臺審批部分。活動展示部分為匿名留言...

MockingBird 2019-08-19 17:51 評論0 收藏0
vue better-scroll 遇到的坑

摘要：先看效果介紹一個簡單的靜態頁面主要是使用做橫向滾動，點擊標簽滾動到相應位置，以及滾到相應位置后對應標簽顯示紅色。先看效果 showImg(https://segmentfault.com/img/bVbqAdC?w=374&h=626); 介紹一個簡單的靜態頁面主要是使用 better-scroll 做橫向滾動，點擊標簽滾動到相應位置，以及滾到相應位置后對應標簽顯示紅色。開發過程中...

yiliang 2019-08-23 16:30 評論0 收藏0
IOING在開發SPA大型應用時有哪些必要的技術條件？

摘要：是一款高性能的前端開發引擎。這些功能模塊的被放置在一起時，將很難避免相互影響，造成難以測試的。結尾的文檔目前還不夠完善，但完全可以滿足必要的開發。前言之前公眾號《前端早讀課》推了我的文章（在這里表示感謝），很多同學有在底下留言，問我 Ionic 和 IOING 是什么關系？從名字來看兩者的開頭雖然都是 IO 打頭但其實兩者毫無關系，一丁點兒都沒有。 IOING 是一款高性能的前端開...

glumes 2019-08-22 11:11 評論0 收藏0