Cara menggunakan Vue untuk mencapai kesan tatal yang lancar

Cara menggunakan Vue untuk mencapai kesan tatal yang lancar

Dengan pembangunan pembangunan web, kesan tatal telah menjadi elemen yang diperlukan dalam banyak reka bentuk web. Dalam rangka kerja Vue, kita boleh menggunakan idea responsif dan komponenisasinya untuk mencapai kesan tatal yang lancar. Artikel ini akan memperkenalkan kaedah mudah untuk menggunakan Vue untuk mencapai kesan tatal yang lancar dan memberikan contoh kod yang sepadan.

Pertama, kita perlu mencipta komponen Vue untuk mencapai kesan tatal yang lancar. Boleh dinamakan SeamlessScroll:

<template>
  <div class="seamless-scroll">
    <div class="scroll-wrap" :style="scrollStyle">
      <slot></slot>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollStyle: {
        transform: "translateX(0)",
        transition: "transform 0.5s linear"
      },
      scrollWidth: 0,
      scrollLeft: 0,
      timer: null
    };
  },
  mounted() {
    this.scrollWidth = this.$refs.scrollWrap.offsetWidth;
    this.startScroll();
  },
  methods: {
    startScroll() {
      this.timer = setInterval(() => {
        this.scrollLeft--;
        if (this.scrollLeft <= -this.scrollWidth) {
          this.scrollLeft = 0;
        }
        this.scrollStyle.transform = `translateX(${this.scrollLeft}px)`;
      }, 30);
    }
  }
};
</script>

<style scoped>
.seamless-scroll {
  overflow: hidden;
}

.scroll-wrap {
  display: inline-flex;
  white-space: nowrap;
  animation: 15s seamless-scroll infinite linear;
}

@keyframes seamless-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

Dalam kod di atas, kami mencipta komponen Vue bernama SeamlessScroll. Templat komponen mengandungi elemen yang dipanggil scroll-wrap untuk menampung penatalan kandungan yang lancar. Dalam fungsi cangkuk yang dipasang, kami mendapat lebar elemen bungkus skrol dan simpan ke dalam pembolehubah scrollWidth.

Pemasa ditakrifkan dalam kaedah startScroll Setiap 30 milisaat, nilai scrollLeft dikurangkan sebanyak 1, dan atribut transform scrollStyle ditukar mengikut nilai scrollLeft untuk mencapai kesan skrol. Apabila menatal ke penghujung kandungan, kami menetapkan semula tatalKiri kepada 0 untuk mencapai tatal lancar.

Selain itu, dalam gaya, kami menetapkan atribut limpahan kelas tatal lancar kepada tersembunyi untuk menyembunyikan kandungan di luar skop bekas. Tetapkan atribut paparan kelas bungkus skrol kepada inline-flex, dan tetapkan atribut ruang putih kepada nowrap untuk memaparkan kandungan dalam satu baris.

Akhir sekali, kami menggunakan animasi CSS untuk mencapai kesan animasi daripada menatal kandungan. Dengan menetapkan keadaan awal dan akhir bingkai utama, kesan penatalan lancar dari kiri ke kanan dicapai.

Untuk menggunakan komponen ini untuk mencapai kesan penatalan lancar, cuma rujuk komponen SeamlessScroll dalam komponen induk dan letakkan kandungan yang ingin anda tatal di dalamnya. Contohnya:

<template>
  <seamless-scroll>
    <div class="item">内容1</div>
    <div class="item">内容2</div>
    <div class="item">内容3</div>
  </seamless-scroll>
</template>

<script>
import SeamlessScroll from '@/components/SeamlessScroll.vue';

export default {
  components: {
    SeamlessScroll
  }
};
</script>

<style>
.item {
  width: 200px;
  height: 100px;
  background: gray;
  margin-right: 20px;
}
</style>

Dalam kod di atas, kami meletakkan tiga elemen div dengan gaya dalam slot komponen SeamlessScroll sebagai kandungan menatal.

Melalui langkah di atas, kami hanya boleh menggunakan Vue untuk mencapai kesan penatalan yang lancar. Kaedah ini boleh diubah suai dan diselaraskan mengikut keperluan sebenar untuk memenuhi senario dan keperluan yang berbeza. Saya harap artikel ini dapat membantu semua orang!

Atas ialah kandungan terperinci Cara menggunakan Vue untuk mencapai kesan tatal yang lancar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!