[Day 21] 簡單易懂的 Nuxt.js 佈告欄實作 - 嘗試 30 日寫文充版挑戰

前言 - Prologue

嘗試寫 30 天文充實版面 ~~(跳過假日 ლ(́◕◞౪◟◕‵ლ) )~~ 更新文章的 Day 21

在現今網路世界中，佈告欄是網站上常見的元素之一。它可以用來告知使用者有關網站最新的消息或者是重要的資訊。

在這篇文章中將使用 Nuxt.js 來實作一個簡單易懂的佈告欄。這個佈告欄能夠自動滾動顯示多個訊息。接下來將逐步介紹如何使用 Nuxt.js 實現這個佈告欄。

正文 - Main text

在本文中將使用 Vue.js 的框架 Nuxt.js 來快速建立一個佈告欄，並使用 JavaScript 實現自動輪播標題的效果。以下是實現自動輪播標題效果的程式碼及步驟。

首先先在 Nuxt.js 專案中建立一個新的 Component，例如 Announcement.vue：

在 Component 中定義 data 屬性，包含一個陣列 noticeArr 和一個 number 變數，用來保存公告資料和當前顯示的公告的索引。

data() {
  return {
    noticeArr: [
      { title: '嘿，我是公告一！' },
      { title: '嗨，我是公告二。' },
      { title: '嗯，我是公告三？' },
    ],
    number: 0,
  };
},

定義一個 computed 屬性 noticeList，用來將當前顯示的公告的資料格式化為一個物件，包含公告的 ID 和文字內容。

computed: {
  noticeList() {
    return {
      id: this.number,
      text: this.noticeArr[this.number].title,
    };
  },
},

在 mounted 生命周期中呼叫 scrollMove()，開始自動滾動公告。

mounted() {
  this.scrollMove();
},

定義 scrollMove() 方法，使用 setTimeout 方法實現一段時間後更新 number 變數，循環顯示不同的公告，並且再次呼叫 scrollMove() 實現自動滾動。

methods: {
  scrollMove() {
    setTimeout(() => {
      if (this.number === this.noticeArr.length - 1) {
        this.number = 0;
      } else {
        this.number += 1;
      }
      this.scrollMove();
    }, 3000);
  },
},

在 <template> 中使用 Vue transition 元素實現公告滾動效果，根據公告的 ID 屬性給每個公告一個獨特的 key 值，用於 Vue 的虛擬 DOM diff 操作。

<transition name="notice-slide">
  <p :key="noticeList.id" class="notice-item">
    {{ noticeList.text }}
  </p>
</transition>

最後定義 notice-slide 的 CSS transition 效果，實現公告的滾動過渡效果。

.notice-slide-enter-active,
.notice-slide-leave-active {
  transition: all 0.8s linear;
}

.notice-slide-enter {
  top: 30px;
}

.notice-slide-leave-to {
  top: -30px;
}

完整程式碼：

<template>
  <div class="notice-box">
    <transition name="notice-slide">
      <p v-if="noticeList" :key="noticeList.id" class="notice-item">{{ noticeList.text }}</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      noticeArr: [
        { title: '嘿，我是公告一！' },
        { title: '嗨，我是公告二。' },
        { title: '嗯，我是公告三？' },
      ],
      number: 0,
      timer: null,
    };
  },
  computed: {
    noticeList() {
      if (this.noticeArr.length > 0) {
        return {
          id: this.number,
          text: this.noticeArr[this.number].title,
        };
      }
      return null;
    },
  },
  mounted() {
    this.scrollMove();
  },
  methods: {
    scrollMove() {
      this.timer = setInterval(() => {
        if (this.noticeArr.length > 0) {
          this.number = (this.number + 1) % this.noticeArr.length;
        }
      }, 3000);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style scoped>
.notice-box {
  width: 500px;
  height: 30px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  text-align: center;
  border: 1px solid red;
}

.notice-item {
  width: 100%;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
}

.notice-slide-enter-active,
.notice-slide-leave-active {
  transition: all 0.8s linear;
}

.notice-slide-enter {
  top: 30px;
}

.notice-slide-leave-to {
  top: -30px;
}
</style>