Comment implémenter la parabole à billes du panier dans vue 2.0

Cet article présente principalement l'exemple de code de la parabole de balle de panier d'achat vue 2.0. Maintenant, je le partage avec vous et le donne comme référence.

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

Remarque : ce projet imite 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 (écrit à l'aide d'un 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 = &#39;translate3d(0,0,0)&#39;;
    el.style.transform = &#39;translate3d(0,0,0)&#39;;
    let inner = el.getElementsByClassName(&#39;inner-hook&#39;)[0];
    inner.style.webkitTransform = &#39;translate3d(0,0,0)&#39;;
    inner.style.transform = &#39;translate3d(0,0,0)&#39;;
   });
  },
  afterDrop(el){
   let ball = this.dropBalls.shift();
   if(ball) {
    ball.show = false;
    el.style.display = &#39;none&#39;;
   }
  }
}

getBoundingClientRect(). Pour la méthode, veuillez lire cet article http://www.jb51.net/article/134208.htm

Explication :

goods est un composant qui contient menu(p), foods( p ), shopcart (composant panier). Parmi eux, les aliments incluent le contrôle du chariot (c'est-à-dire le composant petite boule)

Communication entre les composants : Description : Menu et produits

La première question : petite boule, Besoin pour obtenir la quantité de produits cliqués.

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 :

Importer une Vue globale.

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

La deuxième question : cliquez sur la balle et transmettez le nombre de produits cliqués au panier .

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

Parce que shopcart effectue uniquement des opérations de données sur les données transmises (cela ne changera 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 la position x, y du signe + sur lequel vous avez cliqué. Deuxièmement, le mouvement parabolique n'est disponible que pendant la période enter--> enter-to, mais pas pendant la période Leave--> Leave-to. Par conséquent, vous devez 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

Le hook fourni par Vue

Une chose à noter ici est que Vue sur son site officiel, pour uniquement des js excessifs, done C'est nécessaire. Lorsque j'ajoute done, la méthode after-enter ne peut pas être exécutée.
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.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment implémenter les clics du composant parent pour déclencher des événements de composant enfant dans vue

Comment appeler des méthodes dans vue

Erreurs quotidiennes en Javascript

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!