Explication détaillée de l'effet parabole de petite boule du panier en vue

Cette fois, je vais vous apporter une explication détaillée de l'effet parabole d'une petite boule dans un caddie avec Vue. Quelles sont les précautions pour mettre en œuvre une petite parabole de boule dans un caddie avec Vue. Voici un cas pratique, jetons un oeil.

Cet article présente l'exemple de code de la parabole de balle de panier d'achat vue 2.0 et le partage avec tout le monde. Les détails sont les suivants :

. Remarque : Ce projet est calqué sur Are You Hungry ? J'utilise la dernière version de Vue et certaines méthodes d'écriture de la vidéo ont été abandonnées.

Code de mise en page

<p class="ball-container">
 <transition name="drop"
       v-for="ball in balls"
       @before-enter="beforeDrop"
       @enter="dropping"
       @after-enter="afterDrop">
  <p v-show="ball.show" class="ball" v-bind:css="false">
   <p class="inner inner-hook" ></p>
  </p>
 </transition>
</p>

code CSS (en utilisant la méthode d'écriture au stylet)

.ball-container
 .ball
  position fixed
  left 32px
  bottom 22px
  z-index 200
  transition all 0.4s cubic-bezier(0.49,-0.29,0.75,0.41)
  .inner
   width 16px
   height 16px
   border-radius 50%
   background-color rgb(0,160,220)
   transition all 0.4s linear

code js

data() {
  return {
   balls : [
    {
     show: false
    },
    {
     show: false
    },
    {
     show: false
    },
    {
     show: false
    },
    {
     show: false
    }
   ],
   dropBalls: []
  };
},   
methods: {
  drop(el) {
   for(let i = 0; i < this.balls.length; i++) {
    let ball = this.balls[i];
    if(!ball.show) {
     ball.show = true;
     ball.el = el;
     this.dropBalls.push(ball);
     return ;
    }
   }
  }
  beforeDrop(el) {
   let count = this.balls.length;
   while (count--) {
    let ball = this.balls[count];
    if(ball.show) {
     let rect = ball.el.getBoundingClientRect();
     let x = rect.left - 32;
     let y = -(window.innerHeight - rect.top - 22);
     el.style.webkitTransform = `translate3d(0,${y}px,0)`;
     el.style.transform = `translate3d(0,${y}px,0)`;
     let inner = el.getElementsByClassName(&#39;inner-hook&#39;)[0];
     inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
     inner.style.transform = `translate3d(${x}px,0,0)`;
    }
   }
  }，
  dropping(el) {
   /* eslint-disable no-unused-vars */
   let rf = el.offsetHeight;
   this.$nextTick(() => {
    el.style.webkitTransform = 'translate3d(0,0,0)';
    el.style.transform = 'translate3d(0,0,0)';
    let inner = el.getElementsByClassName('inner-hook')[0];
    inner.style.webkitTransform = 'translate3d(0,0,0)';
    inner.style.transform = 'translate3d(0,0,0)';
   });
  },
  afterDrop(el){
   let ball = this.dropBalls.shift();
   if(ball) {
    ball.show = false;
    el.style.display = 'none';
   }
  }
}

getBoundingClientRect(). Veuillez lire cet article http://www.jb51.net/article/134208.htm

Description :

Goods est un composant qui contient le menu(p), les aliments(p) et le panier (composant panier). Parmi eux, les aliments incluent le cartcontrol (c'est-à-dire un petit composant de balle)

Communication entre composants : Description : Menus et éléments

Question 1 : La petite boule doit obtenir la quantité du produit cliqué.

Utilisez les accessoires de Vue pour transmettre la valeur des aliments à cartcontrol. Mais il y a un problème avec ça. Autrement dit, le composant enfant est mis à jour et ne peut pas être synchronisé avec le composant parent. De plus, dans le composant enfant, un attribut count est enregistré pour la nourriture, et cet attribut ne peut pas être synchronisé avec le composant parent (marchandises).

Solution :

Importez une vue globale.

Utilisez Vue.set(target,key,value); pour enregistrer le nombre pour target;

Question 2 : Cliquez sur la boule et transmettez le nombre de produits cliqués au panier.

Définissez une méthode dans calculated:{} de marchandises et transmettez la méthode au panier sous forme d'accessoires.

Parce que shopcart ne fonctionne que sur les données transmises dans le passé (elles ne changeront pas). Il n’est donc pas nécessaire de synchroniser le composant parent.

Question 3 : La boule du caddie fait un mouvement parabolique.

La boule du caddie fait un mouvement parabolique. Tout d’abord, les points d’atterrissage sont dans le panier et les boules sont aléatoires. Pour effectuer un mouvement parabolique, vous devez obtenir le clic + La position x,y du nombre. Deuxièmement, le mouvement parabolique ne se produit que pendant l'entrée--> Il n'y a pas de point, vous devez donc utiliser la fonction hook fournie par Vue.

Obtenir + numéro x, position y :

La petite boule (cartcontrol) est un sous-composant. Les données doivent être transmises aux marchandises (composant parent). Vous pouvez utiliser Vuex ou utiliser directement le bus d'événements. Démo pour As-tu faim ? Utilisez directement le bus événementiel.

Créez une Vue vide. Dans cartcontrol, enregistrez un écouteur via Bus.$emit(key, ... arg);, puis utilisez le composant parent pour écouter cette méthode via Bus.$on(key, function(... arg));. Transmettez simplement l'objet dom sur lequel vous opérez

Hooks fournis par Vue

Une chose à noter ici est que Vue est sur son site officiel uniquement pour les js excessifs, done est nécessaire. Lorsque j'ajoute done, la méthode after-enter ne peut pas. être exécuté.
Il y a une autre question. Le site officiel de Vue recommande que seuls les effets de transition puissent être obtenus. Ajoutez v-bind:class='false' aux éléments qui subissent une animation de transition. Je ne l'ai pas ajouté auparavant, mais il est apparu. La balle ne peut faire des effets de transition qu'au premier clic.                                        

Je pense que vous maîtrisez la méthode de lecture de cet article. Pour plus de passionnant, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Explication détaillée de l'utilisation des composants dans Vue.js

Comment utiliser le recyclage automatique des transactions dans le pool de connexion mysql (code ci-joint)

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!