今天做大屏的時候需要做一個滾動的效果,從博客看了一個比較簡單的,記錄一下,方便查看,其實自動滾動歸根結(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); // 滾動速度
我這里放了兩段代碼,第一段是針對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)在是大揭秘時間,為什么要定義----------定義它就是為了銷毀他。這里的gundong就是最上面的兩段開啟定時器的代碼。
這里我們可以通過鼠標滑動滑出以及清除定時器來達到暫停的效果,另外,當(dāng)頁面被關(guān)掉的時候,一定要清除定時器,這里說過很多次,為了防止內(nèi)存泄漏和代碼的規(guī)范性,希望大家不要忘記。
以上就是簡單定時器的實現(xiàn)了。