So implementieren Sie die Warenkorb-Ballparabel in Vue 2.0

In diesem Artikel wird hauptsächlich der Beispielcode der Vue 2.0-Einkaufswagen-Kugelparabel vorgestellt. Jetzt werde ich ihn mit Ihnen teilen und Ihnen eine Referenz geben.

In diesem Artikel wird der Beispielcode der Vue 2.0-Einkaufswagen-Kugelparabel vorgestellt und mit allen geteilt. Die Details lauten wie folgt:

Hinweis: Dieses Projekt imitiert Are You Hungry? Ich verwende das neueste Vue und einige der Schreibmethoden für das Video wurden aufgegeben.

Layout-Code

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

CSS-Code (mit Stift geschrieben)

.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

JS-Code

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(). Für die Methode lesen Sie bitte diesen Artikel http://www.jb51.net/article/134208.htm

Erklärung:

Waren sind eine Komponente, die Menü(p), Lebensmittel( p), shopcart (Warenkorbkomponente). Zu den Lebensmitteln gehört Cartcontrol (d. h. kleine Kugelkomponente)

Kommunikation zwischen Komponenten: Beschreibung: Menü und Produkte

Die erste Frage: kleine Kugel, Bedarf um die Menge der angeklickten Produkte zu erhalten.

Verwenden Sie Vues Requisiten, um den Lebensmittelwert an Cartcontrol weiterzugeben. Aber es gibt ein Problem dabei. Das heißt, die untergeordnete Komponente wird aktualisiert und kann nicht wieder mit der übergeordneten Komponente synchronisiert werden. Darüber hinaus ist in der untergeordneten Komponente ein Zählattribut für Lebensmittel registriert, und dieses Attribut kann nicht mit der übergeordneten Komponente (Waren) synchronisiert werden.

Lösung:

Globales Vue importieren.

Verwenden Sie Vue.set(target, key, value);, um die Anzahl für das Ziel zu registrieren;

Die zweite Frage: Klicken Sie auf die Kugel und geben Sie die Anzahl der angeklickten Produkte an den Warenkorb weiter .

Definieren Sie eine Methode in der Berechnung von Waren:{} und übergeben Sie die Methode in Form von Requisiten an den Warenkorb.

Da shopcart nur Datenoperationen für die übergebenen Daten ausführt (diese ändern sich nicht). Daher besteht keine Notwendigkeit, die übergeordnete Komponente zu synchronisieren.

Frage 3: Die Einkaufswagenkugel macht eine parabolische Bewegung.

Die Einkaufswagenkugel macht eine parabolische Bewegung. Zunächst liegen die Landepunkte im Warenkorb und die Kugeln sind zufällig. Um eine parabolische Bewegung auszuführen, müssen Sie die x- und y-Position des angeklickten +-Zeichens ermitteln. Zweitens ist die parabolische Bewegung nur während der Enter-->Enter-to-Periode verfügbar, nicht jedoch während der Leave-->Leave-to-Periode. Daher müssen Sie die von Vue bereitgestellte Hook-Funktion verwenden.

Get + Zahl x, y Position:

Der kleine Ball (cartcontrol) ist eine Unterkomponente. Daten müssen an Waren (übergeordnete Komponente) übergeben werden. Sie können Vuex verwenden oder den Event-Bus direkt nutzen. Demo für Are You Hungry? Nutzen Sie direkt den Veranstaltungsbus.

Erstellen Sie einen leeren Vue. Registrieren Sie in Cartcontrol einen Listener über Bus.$emit(key, ... arg); und verwenden Sie dann die übergeordnete Komponente, um diese Methode über Bus.$on(key, function(... arg)); abzuhören. Übergeben Sie einfach das zu bedienende Dom-Objekt

Der von Vue bereitgestellte Hook

Ein Punkt, der hier zu beachten ist, ist, dass Vue auf seiner offiziellen Website nur exzessive Js verwendet ist notwendig. Wenn ich done hinzufüge, kann die After-Enter-Methode nicht ausgeführt werden.
Es gibt noch eine weitere Frage: Die offizielle Website von Vue empfiehlt, nur Übergangseffekte zu erzielen. Ich habe es vorher nicht hinzugefügt, aber es schien, dass der Ball nur beim ersten Klick Übergangseffekte erzeugen kann.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie Klicks auf übergeordnete Komponenten, um untergeordnete Komponentenereignisse in Vue auszulösen

So rufen Sie Methoden in Vue auf

Tägliche Fehler in Javascript

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Warenkorb-Ballparabel in Vue 2.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!