久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

15
2023/09

定時器實現(xiàn)自動滾動

發(fā)布時間:2023-09-15 18:39:18
發(fā)布者:·
瀏覽量:
0

    今天做大屏的時候需要做一個滾動的效果,從博客看了一個比較簡單的,記錄一下,方便查看,其實自動滾動歸根結(jié)底也是一個定時器,每隔多少時間移動其中的內(nèi)容多少像素,直播過其中間隔的時間很少,肉眼所視的是一個連續(xù)的動作,下面直接看代碼。

 

// 拿到表格掛載后的真實DOM
            const table = this.$refs.anomalyTableInfo;
            // 拿到表格中承載數(shù)據(jù)的div元素
            const divData = table.bodyWrapper;
            // 拿到元素后,對元素進行定時增加距離頂部距離,實現(xiàn)滾動效果(此配置為每100毫秒移動1像素)
            this.dingshitwo = setInterval(() => {
                // 元素自增距離頂部1像素
                divData.scrollTop += 1;
                // 判斷元素是否滾動到底部(可視高度+距離頂部=整個高度)
                if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
                    // 重置table距離頂部距離
                    divData.scrollTop = 0;
                }
            }, 100);  // 滾動速度

  定時器實現(xiàn)自動滾動

定時器實現(xiàn)自動滾動

 

 

  我這里放了兩段代碼,第一段是針對element表格的,其實就多了一步拿到承載表格數(shù)據(jù)的div,這兩段定時器之前的都是為了獲取整個承載容器,而我的第二步能直接拿到容器,所有沒有table.bodyWrapper,當(dāng)我們拿到了整個div之后就可以放定時器了,大家請注意,定時器一定要定義一下,我這里起的名比較low用的,one,two,three大家不要學(xué)我.

    ━((*′д`)爻(′д`*))━!!!!

    為什么要定義一下,待會我們再說,現(xiàn)在每100毫秒執(zhí)行一次,并使元素距離頂部加一,當(dāng)可視高度+距離頂部的高度和整個高度相等時,意味著我們的數(shù)據(jù)到了底部,這時候我們重新把距離頂部的高度變成0,

 

定時器實現(xiàn)自動滾動


    現(xiàn)在是大揭秘時間,為什么要定義----------定義它就是為了銷毀他。這里的gundong就是最上面的兩段開啟定時器的代碼。

    這里我們可以通過鼠標滑動滑出以及清除定時器來達到暫停的效果,另外,當(dāng)頁面被關(guān)掉的時候,一定要清除定時器,這里說過很多次,為了防止內(nèi)存泄漏和代碼的規(guī)范性,希望大家不要忘記。

    以上就是簡單定時器的實現(xiàn)了。


關(guān)鍵詞:
返回列表