Cara menulis vue rolling news

Vue ialah rangka kerja bahagian hadapan yang popular, dan idea terasnya ialah pembangunan komponen. Gaya pembangunan berasaskan komponen menjadikannya ideal untuk membina antara muka interaktif dan aplikasi satu halaman yang kompleks. Dalam Vue, kami boleh melaksanakan komponen berita menatal dengan mudah. Dalam artikel ini, kami akan memperkenalkan cara melaksanakan komponen berita menatal menggunakan Vue.

Struktur HTML

Pertama, kita perlu mentakrifkan struktur HTML bagi komponen berita menatal. Berikut ialah struktur HTML asas:

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

Antaranya, kontena berita ialah bekas komponen berita menatal, senarai berita ialah bekas senarai berita, dan item berita ialah bekas setiap item berita. Kami boleh menetapkan lebih banyak gaya dan struktur HTML mengikut keperluan kami.

Komponen Vue

Seterusnya, kita perlu mentakrifkan komponen berita menatal dalam Vue. Berikut ialah komponen asas 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>

Kod di atas mentakrifkan komponen Vue bernama ScrollNews, yang menerima dua sifat prop: delay dan newsList. Atribut kelewatan menunjukkan bilangan milisaat untuk ditatal dan atribut Senarai berita menunjukkan senarai berita. Dalam komponen, kami menggunakan arahan v-for untuk menggelung melalui pemaparan senarai berita. Sifat currentIndex mewakili indeks item berita yang sedang dipaparkan.

Dalam fungsi cangkuk yang dicipta, kami memanggil kaedah startTimer untuk memulakan pemasa, yang digunakan untuk menatal berita dengan kerap. Dalam kaedah startTimer, kami menggunakan kaedah setInterval untuk mengemas kini sifat currentIndex secara kerap. Jika nilai currentIndex melebihi panjang newsList tolak 1, tetapkan semula currentIndex kepada 0. Ini membolehkan penatalan tanpa had.

Gaya

Akhir sekali, kita perlu menambah gaya pada komponen berita menatal. Berikut ialah gaya CSS asas:

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

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

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

Kami menetapkan limpahan bekas berita kepada tersembunyi untuk menyembunyikan kandungan di luar bekasnya. Gaya senarai berita dan item berita hanya untuk mencantikkan.

Menggunakan komponen

Selepas mentakrifkan komponen berita menatal, kami boleh menggunakannya dalam aplikasi Vue. Berikut ialah contoh penggunaan komponen 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>

Dalam kod di atas, kami menggunakan komponen ScrollNews dalam aplikasi Vue dan menghantar atribut props kepadanya. Atribut newsList ialah tatasusunan yang mengandungi senarai berita dan atribut kelewatan menunjukkan tatal setiap 3000 milisaat.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan Vue untuk melaksanakan komponen berita menatal. Kami mula-mula mentakrifkan struktur dan gaya HTML, kemudian menentukan komponen ScrollNews dalam Vue, dan melaksanakan fungsi penatalan tak terhingga. Akhir sekali, kami menunjukkan cara menggunakan komponen ScrollNews dalam aplikasi Vue.

Atas ialah kandungan terperinci Cara menulis vue rolling news. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!