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>

上記のコードは、ScrollNews という名前の Vue コンポーネントを定義します。これは、2 つの props 属性 (Delay と newsList) を受け入れます。 late 属性はスクロールする時間をミリ秒単位で示し、newsList 属性はニュースのリストを示します。コンポーネントでは、v-for ディレクティブを使用して、ニュース リストのレンダリングをループします。 currentIndex プロパティは、現在表示されているニュース項目のインデックスを表します。

作成したフック関数では、startTimer メソッドを呼び出して、ニュースを定期的にスクロールするために使用されるタイマーを開始します。 startTimer メソッドでは、setInterval メソッドを使用して currentIndex プロパティを定期的に更新します。 currentIndex の値が newsList から 1 を引いた長さを超える場合は、currentIndex を 0 にリセットします。これにより、無限スクロールが可能になります。

スタイル

最後に、スクロール ニュース コンポーネントにスタイルを追加する必要があります。以下は基本的な CSS スタイルです:

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

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

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

news-container のオーバーフローを hidden に設定して、そのコンテナを超えたコンテンツを非表示にします。ニュースリストとニュースアイテムのスタイルは美化のみを目的としています。

コンポーネントの使用

スクロール ニュース コンポーネントを定義したら、それを 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 属性はニュース リストを含む配列で、lay 属性は 3000 ミリ秒ごとのスクロールを示します。

概要

この記事では、Vue を使用してローリング ニュース コンポーネントを実装する方法を紹介しました。まず HTML の構造とスタイルを定義し、次に Vue で ScrollNews コンポーネントを定義し、無限スクロール機能を実装しました。最後に、Vue アプリケーションで ScrollNews コンポーネントを使用する方法を示しました。

以上がvueローリングニュースの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。