How to implement the shopping cart ball parabola in vue 2.0

This article mainly introduces the sample code of vue 2.0 shopping cart ball parabola. Now I will share it with you and give you a reference.

This article introduces the sample code of vue 2.0 shopping cart ball parabola and shares it with everyone. The details are as follows:

Note: This project imitates Are You Hungry? I'm using the latest Vue, and some of the writing methods on the video have been abandoned.

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 (using stylus writing method)

.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(). For the method, please read this article http://www.jb51.net/article/134208.htm

Description:

goods is a component that contains menu(p), foods(p ), shopcart (shopping cart component). Among them, foods include cartcontrol (i.e., small ball component)

Communication between components:Description: Menu and products

The first question: small ball, Need to get the quantity of clicked products.

Use Vue's props to pass the foods value to cartcontrol. But there's a problem with this. That is, the child component is updated and cannot be synchronized back to the parent component. Moreover, in the child component, a count attribute is registered for food, and this attribute cannot be synchronized back to the parent component (goods).

Solution:

Import global Vue.

Use Vue.set(target,key,value); to register count for target;

The second question: when the ball is clicked, the number of clicked products will be passed to shopcart.

Define a method in computed:{} of goods, and pass the method to shopcart in the form of props.

Because, shopcart only performs data operations on the passed data (it will not change). Therefore, there is no need to synchronize the parent component.

Question 3: The shopping cart ball makes a parabolic motion.

The shopping cart ball makes a parabolic motion. First of all, the landing points are in the shopping cart, and the balls are random. To do parabolic motion, you need to obtain the x, y position of the clicked number. Secondly, parabolic motion is only available during the enter--> enter-to period, but not during the leave--> leave-to period. Therefore, you need to use the hook function provided by Vue.

Get the x,y position:

The small ball (cartcontrol) is a subcomponent. Data needs to be passed to goods (parent component). You can use Vuex, or use the event bus directly. Demo for Are You Hungry? Use the event bus directly.

Create an empty Vue. In cartcontrol, register a listener through Bus.$emit(key, ... arg);, and then use the parent component to listen to this method through Bus.$on(key, function(... arg));. Just pass the manipulated dom object to it

Hooks provided by Vue

One thing to note here is that Vue is on its official website. For only excessive js, done It is necessary. When I add done, the after-enter method cannot be executed.
There is another question. The Vue official website recommends that there is only a transition effect. Add v-bind:class='false' to the element that performs transition animation. I didn't add it before, but it appeared. The ball can only do transition effects at the first click.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement parent component clicks to trigger child component events in vue

How to call methods in vue

Daily Errors in Javascript

The above is the detailed content of How to implement the shopping cart ball parabola in vue 2.0. For more information, please follow other related articles on the PHP Chinese website!