成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

hiYoHoo / 1959人閱讀

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

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

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

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

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

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

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

橫向滾動的代碼:

    
    
    
        
        
        
        Document
        
    
    
        

            123

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106878.html

相關(guān)文章

  • 基于better-scroll的vue滾動組件

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

    xiaotianyi 評論0 收藏0

  • vueTable大數(shù)據(jù)展示優(yōu)化

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

    JasinYip 評論0 收藏0

  • 基于React與Redux的留言墻的實現(xiàn)

    摘要：設(shè)計本次留言墻分為兩部分?；顒诱故静糠譃槟涿粞詨π问胶蟾臑閷嵜?，需要根據(jù)收到的留言墻進行向上平滑滾動，如果沒有消息接收則停止在最后一條消息上。主要為處理數(shù)據(jù)的數(shù)據(jù)層。 背景 由于某事業(yè)群需要留言墻用于年會，同時需要調(diào)用大象公眾號服務(wù)器接口，所以在今年年初開發(fā)了留言墻用于活動現(xiàn)場交流。 設(shè)計 本次留言墻分為兩部分。一部分為活動展示部分，另一部分為后臺審批部分。 活動展示部分為匿名留言...

    MockingBird 評論0 收藏0

  • vue better-scroll 遇到的坑

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

    yiliang 評論0 收藏0

  • IOING在開發(fā)SPA大型應(yīng)用時有哪些必要的技術(shù)條件？

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

    glumes 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<