Detaillierte Erklärung des kleinen Kugelparabeleffekts des Einkaufswagens in Vue

Dieses Mal werde ich Ihnen den Parabeleffekt einer kleinen Kugel in einem Einkaufswagen mit Vue ausführlich erklären. Was sind die Vorsichtsmaßnahmen für die Implementierung einer kleinen Kugelparabel in einem Einkaufswagen mit Vue? Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

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 basiert auf Are You Hungry? Ich verwende das neueste Vue und einige der Schreibmethoden für das Video wurden aufgegeben.

Layoutcode

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

.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 = '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(). Bitte lesen Sie diesen Artikel http://www.jb51.net/article/134208.htm

Beschreibung:

waren ist eine Komponente, die Menü(p), Lebensmittel(p), Shopcart (Warenkorbkomponente) enthält. Zu diesen Lebensmitteln gehört Cartcontrol (d. h. eine kleine Kugelkomponente)

Kommunikation zwischen Komponenten: Beschreibung: Menüs und Elemente

Frage 1: Die kleine Kugel muss die Menge des angeklickten Produkts erhalten.

Verwenden Sie die Requisiten von Vue, 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 target;

zu registrieren Frage 2: Klicken Sie auf die Kugel und geben Sie die Anzahl der angeklickten Produkte an den Warenkorb weiter.

Definieren Sie eine Methode in berechnet:{} von Waren und übergeben Sie die Methode in Form von Requisiten an shopcart.

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

Der Einkaufswagenball 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 auf das + klicken Die x,y-Position der Zahl. Zweitens tritt eine parabolische Bewegung nur beim Eintreten--> auf und beim Verlassen--> Da es keinen Punkt gibt, müssen Sie die von Vue bereitgestellte Hook-Funktion verwenden.

Erhalten Sie + Nummer 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 ein leeres 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 Dom-Objekt, das Sie bearbeiten

Von Vue bereitgestellte Hooks

Eine Sache, die hier zu beachten ist, ist, dass Vue auf seiner offiziellen Website nur „Done“ enthält. Wenn ich „Done“ hinzufüge, kann dies nicht der Fall sein ausgeführt werden.
Es gibt noch eine weitere Frage: Die offizielle Website von Vue empfiehlt, nur den Übergangseffekt zu erzielen. Ich habe es vorher nicht hinzugefügt, aber es schien, dass der Ball nur beim ersten Klick Übergangseffekte erzeugen kann.                                        

Ich glaube, dass Sie die Methode zum Lesen dieses Artikels beherrschen. Weitere spannende Artikel finden Sie auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von Komponenten in Vue.js

So verwenden Sie das automatische Transaktionsrecycling im MySQL-Verbindungspool (angehängter Code)

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des kleinen Kugelparabeleffekts des Einkaufswagens in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!