Vue 롤링 뉴스 작성 방법

Vue는 널리 사용되는 프런트 엔드 프레임워크이며 핵심 아이디어는 구성 요소 개발입니다. 구성 요소 기반 개발 스타일 덕분에 대화형 인터페이스와 복잡한 단일 페이지 애플리케이션을 구축하는 데 이상적입니다. Vue에서는 스크롤링 뉴스 구성요소를 쉽게 구현할 수 있습니다. 이 글에서는 Vue를 사용하여 스크롤링 뉴스 컴포넌트를 구현하는 방법을 소개합니다.

HTML 구조

먼저 스크롤링 뉴스 구성 요소의 HTML 구조를 정의해야 합니다. 다음은 기본 HTML 구조입니다.

<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>

그 중 news-container는 스크롤하는 뉴스 구성 요소의 컨테이너이고, news-list는 뉴스 목록의 컨테이너이며, news-item은 각 뉴스 항목의 컨테이너입니다. 필요에 따라 더 많은 스타일과 HTML 구조를 설정할 수 있습니다.

Vue 구성 요소

다음으로 Vue에서 스크롤 뉴스 구성 요소를 정의해야 합니다. 다음은 기본 Vue 구성 요소입니다.

<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>

위 코드는 두 개의 props 속성인 Delay와 newsList를 허용하는 ScrollNews라는 Vue 구성 요소를 정의합니다. Delay 속성은 스크롤할 시간을 밀리초 단위로 나타내며, newsList 속성은 뉴스 목록을 나타냅니다. 구성 요소에서는 v-for 지시어를 사용하여 루프에서 뉴스 목록을 렌더링합니다. currentIndex 속성은 현재 표시되는 뉴스 항목의 인덱스를 나타냅니다.

생성된 후크 함수에서 startTimer 메서드를 호출하여 정기적으로 뉴스를 스크롤하는 데 사용되는 타이머를 시작합니다. startTimer 메소드에서는 setInterval 메소드를 사용하여 currentIndex 속성을 정기적으로 업데이트합니다. currentIndex의 값이 newsList의 길이에서 1을 뺀 길이를 초과하는 경우 currentIndex를 0으로 재설정합니다. 이를 통해 무한 스크롤이 가능합니다.

Styles

마지막으로 스크롤하는 뉴스 구성 요소에 스타일을 추가해야 합니다. 다음은 기본 CSS 스타일입니다.

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

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

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

뉴스 컨테이너의 오버플로를 숨김으로 설정하여 컨테이너 너머의 콘텐츠를 숨겼습니다. 뉴스 목록과 뉴스 항목의 스타일은 단지 미화를 위한 것입니다.

구성 요소 사용

스크롤링 뉴스 구성 요소를 정의한 후 Vue 애플리케이션에서 사용할 수 있습니다. 다음은 ScrollNews 구성 요소를 사용하는 예입니다.

<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>

위 코드에서는 Vue 애플리케이션의 ScrollNews 구성 요소를 사용하고 여기에 props 속성을 전달합니다. newsList 속성은 뉴스 목록을 포함하는 배열이고, 지연 속성은 3000밀리초마다 스크롤됨을 나타냅니다.

요약

이 기사에서는 Vue를 사용하여 스크롤 뉴스 구성 요소를 구현하는 방법을 소개했습니다. 먼저 HTML 구조와 스타일을 정의한 다음 Vue에서 ScrollNews 컴포넌트를 정의하고 무한 스크롤 기능을 구현했습니다. 마지막으로 Vue 애플리케이션에서 ScrollNews 구성 요소를 사용하는 방법을 보여주었습니다.

위 내용은 Vue 롤링 뉴스 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!