tanglung pusingan vue melompat secara automatik

Vue.js ialah rangka kerja bahagian hadapan yang popular hari ini Ia menyediakan pelbagai komponen dan pemalam untuk membantu pembangun membangunkan aplikasi web yang cemerlang dengan cepat dan cekap. Salah satu komponen yang sangat biasa ialah komponen Carousel, yang membolehkan kami memaparkan berbilang gambar atau karusel, dan menyokong penukaran kandungan paparan secara manual atau automatik. Artikel ini akan memperkenalkan cara menggunakan perpustakaan komponen UI Vue.js dan Elemen untuk melaksanakan fungsi lompat automatik tanglung pusingan.

1. Persediaan

Pertama, kita perlu memperkenalkan perpustakaan komponen UI Elemen ke dalam projek, yang boleh dipasang melalui npm:

npm install element-ui --save

Kemudian dalam utama. Perkenalkan ElementUI melalui import dalam js dan daftarkan komponen:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

2. Buat komponen tanglung berputar

Buat fail komponen Carousel.vue dalam projek dan tentukannya melalui teg templat Templat komponen:

<template>
  <el-carousel :interval="interval" :autoplay="autoplay">
    <el-carousel-item v-for="(item, index) in items" :key="index">
      <img :src="item.imgUrl" />
      <h3>{{ item.title }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

Dalam komponen, kami menggunakan komponen el-carousel dan el-carousel-item dalam Elemen UI, yang menyediakan pilihan konfigurasi yang kaya dan cangkuk acara untuk paparan tersuai dan Gelagat interaksi. Di sini, kami hanya menetapkan atribut interval dan atribut autoplay, yang masing-masing menunjukkan selang putaran dan sama ada hendak menghidupkan putaran automatik.

Selain itu, melalui arahan v-for, kami menjadikan setiap elemen dalam tatasusunan item menjadi item karusel. Setiap item karusel mengandungi imej dan tajuk, sepadan dengan imgUrl dan atribut tajuk dalam model data.

3. Tambah data dan kaedah

Dalam komponen, kita perlu menentukan model data dan beberapa kaedah untuk melaksanakan fungsi karusel automatik. Di sini, kami menggunakan sifat yang dikira untuk mengira indeks item karusel semasa dan mengemas kini nilai sifat ini setiap kali item karusel ditukar.

<script>
export default {
  data() {
    return {
      items: [
        { imgUrl: '...', title: '...' },
        { imgUrl: '...', title: '...' },
        { imgUrl: '...', title: '...' },
        { imgUrl: '...', title: '...' }
      ],
      currentIndex: 0,
      interval: 3000,
      autoplay: true
    }
  },
  computed: {
    activeIndex() {
      return this.currentIndex % this.items.length
    }
  },
  methods: {
    handleCarouselChange(index) {
      this.currentIndex = index
    }
  }
}
</script>

Antaranya, tatasusunan item digunakan untuk menyimpan data item karusel, atribut currentIndex mewakili indeks item karusel semasa dan atribut selang dan automain digunakan untuk mengkonfigurasi selang masa karusel dan suis main balik automatik.

Sifat pengiraan activeIndex ditakrifkan melalui atribut yang dikira Ia tidak terikat secara langsung dengan atribut activeIndex komponen karusel, tetapi dikira. Ini adalah untuk melaksanakan fungsi gelung karusel Apabila nilai indeks item karusel semasa mencapai panjang item tatasusunan, ia akan ditetapkan semula kepada 0. Dengan cara ini, kita boleh mencapai kesan melompat kembali ke item karusel pertama secara automatik selepas mencapai item karusel terakhir.

Pada masa yang sama, kami juga menentukan kaedah handleCarouselChange, yang akan dipanggil apabila item karusel ditukar dan menyimpan nilai indeks item karusel semasa dengan mengemas kini sifat currentIndex.

4. Melaksanakan karusel automatik

Sekarang kami telah menyelesaikan konfigurasi asas dan pelaksanaan fungsi komponen tanglung pusingan, kami akan menulis karusel automatik dalam cangkuk kitaran hayat yang dipasang Kod Main:

<script>
export default {
  mounted() {
    setInterval(() => {
      this.currentIndex++
    }, this.interval)
  }
  // ...
}
</script>

Di sini, kami menggunakan kaedah setInterval JavaScript untuk melaksanakan kod dengan kerap untuk mencapai penukaran automatik imej karusel. Kami menetapkan selang masa setiap putaran kepada nilai yang ditakrifkan oleh atribut selang untuk mencapai kawalan masa bersatu.

Pada ketika ini, kami telah menyelesaikan pelaksanaan fungsi lompat automatik tanglung pusingan. Anda boleh melaraskan selang putaran dengan mengkonfigurasi atribut selang, dan anda juga boleh mematikan atau menghidupkan putaran automatik dengan mengubah suai atribut automain.

Ringkasan

Melalui pengenalan dan demonstrasi artikel ini, kami telah mempelajari cara melaksanakan fungsi lompat automatik tanglung pusingan melalui Vue.js dan perpustakaan komponen UI Elemen, dan cara untuk laksanakan main balik gelung karusel. Ini sangat praktikal untuk pelbagai senario seperti paparan gambar, maklumat berita, promosi produk, dan lain-lain dalam aplikasi web. Dalam pembangunan sebenar, kami boleh terus mengoptimumkan dan mengembangkan kod mengikut keperluan perniagaan tertentu untuk meningkatkan prestasi aplikasi dan pengalaman pengguna.

Atas ialah kandungan terperinci tanglung pusingan vue melompat secara automatik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!