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('inner-hook')[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(). 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
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!

vue中props可以传递函数;vue中可以将字符串、数组、数字和对象作为props传递,props主要用于组件的传值,目的为了接收外面传过来的数据,语法为“export default {methods: {myFunction() {// ...}}};”。

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Atom editor mac version download
The most popular open source editor
