今天做大屏的時(shí)候需要做一個(gè)滾動(dòng)的效果，從博客看了一個(gè)比較簡(jiǎn)單的，記錄一下，方便查看，其實(shí)自動(dòng)滾動(dòng)歸根結(jié)底也是一個(gè)定時(shí)器，每隔多少時(shí)間移動(dòng)其中的內(nèi)容多少像素，直播過(guò)其中間隔的時(shí)間很少，肉眼所視的是一個(gè)連續(xù)的動(dòng)作，下面直接看代碼。
// 拿到表格掛載后的真實(shí)DOM
const table = this.$refs.anomalyTableInfo;
// 拿到表格中承載數(shù)據(jù)的div元素
const divData = table.bodyWrapper;
// 拿到元素后，對(duì)元素進(jìn)行定時(shí)增加距離頂部距離，實(shí)現(xiàn)滾動(dòng)效果(此配置為每100毫秒移動(dòng)1像素)
this.dingshitwo = setInterval(() => {
// 元素自增距離頂部1像素
divData.scrollTop += 1;
// 判斷元素是否滾動(dòng)到底部(可視高度+距離頂部=整個(gè)高度)
if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
// 重置table距離頂部距離
divData.scrollTop = 0;
}
}, 100); // 滾動(dòng)速度 
我這里放了兩段代碼，第一段是針對(duì)element表格的，其實(shí)就多了一步拿到承載表格數(shù)據(jù)的div，這兩段定時(shí)器之前的都是為了獲取整個(gè)承載容器，而我的第二步能直接拿到容器，所有沒(méi)有table.bodyWrapper，當(dāng)我們拿到了整個(gè)div之后就可以放定時(shí)器了，大家請(qǐng)注意，定時(shí)器一定要定義一下，我這里起的名比較low用的，one，two，three大家不要學(xué)我.
━((*′д｀)爻(′д｀*))━!!!!
為什么要定義一下，待會(huì)我們?cè)僬f(shuō)，現(xiàn)在每100毫秒執(zhí)行一次，并使元素距離頂部加一，當(dāng)可視高度+距離頂部的高度和整個(gè)高度相等時(shí)，意味著我們的數(shù)據(jù)到了底部，這時(shí)候我們重新把距離頂部的高度變成0，
現(xiàn)在是大揭秘時(shí)間，為什么要定義----------定義它就是為了銷毀他。這里的gundong就是最上面的兩段開(kāi)啟定時(shí)器的代碼。
這里我們可以通過(guò)鼠標(biāo)滑動(dòng)滑出以及清除定時(shí)器來(lái)達(dá)到暫停的效果，另外，當(dāng)頁(yè)面被關(guān)掉的時(shí)候，一定要清除定時(shí)器，這里說(shuō)過(guò)很多次，為了防止內(nèi)存泄漏和代碼的規(guī)范性，希望大家不要忘記。
以上就是簡(jiǎn)單定時(shí)器的實(shí)現(xiàn)了。
