vue通過(guò)定時(shí)器實(shí)現(xiàn)垂直滾動(dòng)公告

更新時(shí)間：2022年04月08日 10:31:46 作者：鐵錘妹妹@

這篇文章主要為大家詳細(xì)介紹了vue通過(guò)定時(shí)器實(shí)現(xiàn)垂直滾動(dòng)公告，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

最近項(xiàng)目有個(gè)需求是做一個(gè)垂直滾動(dòng)的公告，其中也涉及到了設(shè)置定時(shí)器和清除定時(shí)器方面的知識(shí)點(diǎn)，在這里記錄下過(guò)程，不對(duì)的地方歡迎大家指正，一起共同進(jìn)步！

思路

1. 寫好樣式，把滾動(dòng)的內(nèi)容循環(huán)出來(lái)，固定顯示區(qū)域的高度，超出隱藏
2. 設(shè)置定時(shí)器，將第一條數(shù)據(jù)塞到最后一個(gè)，刪除第一條數(shù)據(jù)，暫停播放
3. 在mounted中創(chuàng)建并執(zhí)行定時(shí)器
4. destroyed中清除定時(shí)器

HTML部分

<div class="roll">
? ? ? <div class="roll-line" />
? ? ? <i class="el-icon-bell"></i>
? ? ? <ul class="list">
? ? ? ? <li
? ? ? ? ? v-for="(item, index) in ulList"
? ? ? ? ? :key="item.id"
? ? ? ? ? :class="!index && play ? 'toUp' : ''"
? ? ? ? >
? ? ? ? ? {{ item.msg }}
? ? ? ? </li>
? ? ? </ul>
</div>

JS部分

export default {
? data() {
? ? return {
? ? ? ulList: [
? ? ? ? { msg: "這是第一條信息這是第一條信息這是第一條信息這是第一條信息" },
? ? ? ? { msg: "這是第二條信息這是第二條信息這是第二條信息這是第二條信息" },
? ? ? ? { msg: "這是第三條信息這是第三條信息這是第三條信息這是第三條信息" },
? ? ? ? { msg: "這是第四條信息這是第四條信息這是第四條信息這是第四條信息" },
? ? ? ? { msg: "這是第五條信息這是第五條信息這是第五條信息這是第五條信息" }
? ? ? ],
? ? ? play: false,
? ? ? timer: null, // //接收定時(shí)器
? ? };
? },
? mounted() { ?//頁(yè)面掛載完成時(shí)就開(kāi)始定時(shí)器，公告文字滾動(dòng)
? ? setInterval(this.startPlay, 4000);
? ? ?console.log('開(kāi)始定時(shí)器');
? },
? destroyed() { // 頁(yè)面銷毀時(shí)清除定時(shí)器
? ? clearInterval(this.timer);?
? ? console.log('銷毀定時(shí)器');
? },
? methods: {
? ? startPlay() {
? ? ? let that = this;
? ? ? that.play = true; //開(kāi)始播放
? ? ? that.timer = setTimeout(() => { ?//創(chuàng)建并執(zhí)行定時(shí)器
? ? ? ? that.ulList.push(that.ulList[0]); //將第一條數(shù)據(jù)塞到最后一個(gè)
? ? ? ? that.ulList.shift(); //刪除第一條數(shù)據(jù)
? ? ? ? that.play = false; //暫停播放
? ? ? }, 500);
? ? ? console.log(that.timer);
? ? },
? }
};

css樣式

<style lang="scss" scoped>
.roll {
? width: 100%;
? height: 60px; /*關(guān)鍵樣式*/
? line-height: 60px; /*關(guān)鍵樣式*/
? background: #fff;
? margin-bottom: 24px;
? box-shadow: 4px 0 10px rgba(226, 226, 226, 0.3);
? padding: 0 20px;
? color: #f5212d;
? font-size: 14px;
? display: flex;
? .roll-line {
? ? width: 2px;
? ? height: 100%;
? ? background: #dee2e6;
? ? margin: 0 20px 0 -20px;
? }
? .el-icon-bell {
? ? color: #343a40;
? ? line-height: 60px; /*關(guān)鍵樣式*/
? ? margin-right: 10px;
? }
? .toUp {
? ? margin-top: -60px; /*關(guān)鍵樣式*/
? ? transition: all 1s; /*關(guān)鍵樣式*/
? }
? .list {
? ? list-style: none;
? ? width: 100%;
? ? text-align: center;
? ? overflow: hidden; /*關(guān)鍵樣式*/
? ? height: 60px; /*關(guān)鍵樣式*/
? ? padding: 0;
? ? margin: 0;
? }
? li {
? ? text-align: left;
? ? height: 60px; /*關(guān)鍵樣式*/
? ? line-height: 60px; /*關(guān)鍵樣式*/
? }
}
</style>

關(guān)于定時(shí)器的清除

由于定時(shí)器在調(diào)用時(shí)，都會(huì)返回一個(gè)整形的數(shù)字，該數(shù)字代表定時(shí)器的序號(hào)，即第多少個(gè)定時(shí)器，所以定時(shí)器的清除要借助于這個(gè)返回的數(shù)字。
定時(shí)器清除的方法：clearTimeout(obj)和clearInterval(obj)。（注意定時(shí)器的清除方法）

通過(guò)打印console.log(that.timer);可以看出確實(shí)會(huì)返回一個(gè)整數(shù)，他代表是第幾個(gè)定時(shí)器