Comment utiliser Vue pour obtenir des effets de défilement transparents

Comment utiliser Vue pour obtenir des effets de défilement fluides

Avec le développement du développement Web, les effets de défilement sont devenus un élément nécessaire dans de nombreuses conceptions Web. Dans le framework Vue, nous pouvons utiliser ses idées de réactivité et de composantisation pour obtenir un effet de défilement transparent. Cet article présentera une méthode simple pour utiliser Vue pour obtenir des effets de défilement transparents et fournira des exemples de code correspondants.

Tout d'abord, nous devons créer un composant Vue pour obtenir un effet de défilement transparent. Peut être nommé 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>

Dans le code ci-dessus, nous avons créé un composant Vue nommé SeamlessScroll. Le modèle du composant contient un élément appelé scroll-wrap pour permettre un défilement transparent du contenu. Dans la fonction hook montée, nous obtenons la largeur de l'élément scroll-wrap et l'enregistrons dans la variable scrollWidth.

Une minuterie est définie dans la méthode startScroll. Toutes les 30 millisecondes, la valeur de scrollLeft est décrémentée de 1 et l'attribut de transformation de scrollStyle est modifié en fonction de la valeur de scrollLeft pour obtenir l'effet de défilement. Lors du défilement jusqu'à la fin du contenu, nous réinitialisons scrollLeft à 0 pour obtenir un défilement transparent.

De plus, dans le style, nous définissons l'attribut overflow de la classe Seamless-Scroll sur Hidden pour masquer le contenu au-delà de la portée du conteneur. Définissez l'attribut display de la classe scroll-wrap sur inline-flex et définissez l'attribut white-space sur nowrap pour afficher le contenu sur une seule ligne.

Enfin, nous avons utilisé l'animation CSS pour obtenir l'effet d'animation du contenu défilant. En définissant les états initial et final des images clés, l'effet de défilement transparent de gauche à droite est obtenu.

Pour utiliser ce composant pour obtenir un effet de défilement transparent, référencez simplement le composant SeamlessScroll dans le composant parent et placez-y le contenu que vous souhaitez faire défiler. Par exemple :

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

Dans le code ci-dessus, nous plaçons trois éléments div avec des styles dans les emplacements du composant SeamlessScroll comme contenu défilant.

Grâce aux étapes ci-dessus, nous pouvons simplement utiliser Vue pour obtenir des effets de défilement transparents. Cette méthode peut être modifiée et ajustée en fonction des besoins réels pour répondre à différents scénarios et exigences. J'espère que cet article pourra être utile à tout le monde !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!