vue通過定時器實現(xiàn)垂直滾動公告

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

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

前言

最近項目有個需求是做一個垂直滾動的公告，其中也涉及到了設置定時器和清除定時器方面的知識點，在這里記錄下過程，不對的地方歡迎大家指正，一起共同進步！

思路

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

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, // //接收定時器
? ? };
? },
? mounted() { ?//頁面掛載完成時就開始定時器，公告文字滾動
? ? setInterval(this.startPlay, 4000);
? ? ?console.log('開始定時器');
? },
? destroyed() { // 頁面銷毀時清除定時器
? ? clearInterval(this.timer);?
? ? console.log('銷毀定時器');
? },
? methods: {
? ? startPlay() {
? ? ? let that = this;
? ? ? that.play = true; //開始播放
? ? ? that.timer = setTimeout(() => { ?//創(chuàng)建并執(zhí)行定時器
? ? ? ? that.ulList.push(that.ulList[0]); //將第一條數(shù)據(jù)塞到最后一個
? ? ? ? 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)于定時器的清除

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

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