Vue 롤링 뉴스 작성 방법

<div class="news-container">
  <ul class="news-list">
    <li class="news-item">新闻内容1</li>
    <li class="news-item">新闻内容2</li>
    <li class="news-item">新闻内容3</li>
    <li class="news-item">新闻内容4</li>
    <li class="news-item">新闻内容5</li>
    <li class="news-item">新闻内容6</li>
  </ul>
</div>

<template>
  <div class="news-container">
    <ul class="news-list">
      <li v-for="news in newsList" class="news-item">{{ news }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "ScrollNews",
  props: {
    delay: {
      type: Number,
      default: 3000,
    },
    newsList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      currentIndex: 0,
    };
  },
  created() {
    this.startTimer();
  },
  methods: {
    startTimer() {
      setInterval(() => {
        this.currentIndex++;
        if (this.currentIndex > this.newsList.length - 1) {
          this.currentIndex = 0;
        }
      }, this.delay);
    },
  },
};
</script>

.news-container {
  width: 100%;
  overflow: hidden;
}

.news-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.news-item {
  line-height: 30px;
  margin-bottom: 10px;
}

<template>
  <div>
    <scroll-news :news-list="newsList" :delay="3000"></scroll-news>
  </div>
</template>

<script>
import ScrollNews from "./ScrollNews.vue";

export default {
  name: "App",
  components: {
    ScrollNews,
  },
  data() {
    return {
      newsList: [
        "新闻内容1",
        "新闻内容2",
        "新闻内容3",
        "新闻内容4",
        "新闻内容5",
        "新闻内容6",
      ],
    };
  },
};
</script>