search
HomeWeb Front-endJS TutorialDetailed explanation of the parabola effect of a small ball in the shopping cart using vue

This time I will bring you a detailed explanation of the small ball parabola effect of Vue in realizing the shopping cart. What are the precautions for Vue to realize the small ball parabola in the shopping cart. The following is a practical case, let's take a look.

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

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

Layout code

<p>
 <transition>
  <p>
   </p>
<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  {
    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

illustrate:

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

Communication between components: Description: Menus and items

Question 1: The small ball needs to obtain the quantity of the clicked product.

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 on target;

Question 2: Click the ball and pass the number of clicked products to shopcart.

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

Because shopcart only operates on the data passed in the past (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 clicked The x,y position of the number. Secondly, parabolic motion only occurs during enter--> enter-to, and during leave--> leave-to There is no period, so you need to use the hook function provided by Vue.

Get the number 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 dom object you are operating on

Hooks provided by Vue

One thing to note here is that Vue is on its official website. For only excessive js, done 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.                                                            

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of components in Vue.js

How to use transaction automatic recycling in mysql connection pool (attached Code)

The above is the detailed content of Detailed explanation of the parabola effect of a small ball in the shopping cart using vue. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Java中如何实现一个简单的购物车功能?Java中如何实现一个简单的购物车功能?Nov 02, 2023 am 11:56 AM

Java中如何实现一个简单的购物车功能?购物车是在线商店的一个重要功能,它允许用户将想要购买的商品添加到购物车中,并对商品进行管理。在Java中,我们可以通过使用面向对象的方式来实现一个简单的购物车功能。首先,我们需要定义一个商品类。该类包含商品的名称、价格和数量等属性,以及相应的Getter和Setter方法。例如:publicclassProduct

PHP实现购物车功能PHP实现购物车功能Jun 22, 2023 am 09:00 AM

在我们日常生活中,网上购物已经成为非常普遍的消费方式,而购物车功能也是网上购物的重要组成部分之一。那么,本文将为大家介绍如何利用PHP语言来实现购物车的相关功能。一、技术背景购物车是一种在线购物网站常见的功能。当用户在一个网站上浏览一些商品,他们可以将这些商品添加到一个虚拟的购物车中,以便于在后续的结账过程中选择和管理。购物车通常包括以下基本功能:添加商品:

PHP商城开发技巧:设计购物车和订单同步功能PHP商城开发技巧:设计购物车和订单同步功能Jul 30, 2023 pm 07:22 PM

PHP商城开发技巧:设计购物车和订单同步功能在一个商城网站中,购物车和订单是不可或缺的功能。购物车用于用户选购商品并保存到临时购物车中,而订单则是用户确认购买商品后生成的记录。为了提升用户体验和减少错误,设计一个购物车和订单同步的功能非常重要。一、购物车和订单的概念购物车通常是一个临时的容器,用于保存用户选购的商品。用户可以将商品加入购物车,方便浏览和管理。

如何利用Redis和JavaScript实现购物车功能如何利用Redis和JavaScript实现购物车功能Sep 21, 2023 pm 01:27 PM

如何利用Redis和JavaScript实现购物车功能购物车是电商网站中非常常见的功能之一,它允许用户将感兴趣的商品添加到购物车中,方便用户随时查看和管理购买的商品。在本文中,我们将介绍如何利用Redis和JavaScript实现购物车功能,并提供具体的代码示例。一、准备工作在开始之前,我们需要确保已经安装并配置好Redis,可以通过官方网站[https:/

如何在MySQL中设计商城的购物车表结构?如何在MySQL中设计商城的购物车表结构?Oct 30, 2023 pm 02:12 PM

如何在MySQL中设计商城的购物车表结构?随着电子商务的快速发展,购物车已成为在线商城的重要组成部分。购物车用于保存用户选购的商品和相关信息,为用户提供方便快捷的购物体验。在MySQL中设计一个合理的购物车表结构,可以帮助开发人员有效存储和管理购物车数据。本文将介绍如何在MySQL中设计商城的购物车表结构,以及提供一些具体的代码示例。首先,购物车表应该包含以

如何使用PHP实现一个简单的购物车功能如何使用PHP实现一个简单的购物车功能Sep 24, 2023 am 09:13 AM

如何使用PHP实现一个简单的购物车功能购物车功能是电子商务网站中必不可少的一部分,它允许用户将感兴趣的商品添加到购物车中,随后可以进行结算或继续浏览和添加商品。本文将介绍如何使用PHP实现一个简单的购物车功能,并提供具体的代码示例。创建数据库和表格首先,我们需要创建一个数据库和一个用于存储购物车数据的表。CREATEDATABASEshopping_ca

实战教程:PHP和MySQL实现购物车功能详解实战教程:PHP和MySQL实现购物车功能详解Mar 15, 2024 pm 12:27 PM

实战教程:PHP和MySQL实现购物车功能详解购物车功能是网站开发中常见的功能之一,通过购物车用户可以方便地将想要购买的商品加入购物车,然后进行结算和支付。在这篇文章中,我们将详细介绍如何使用PHP和MySQL实现一个简单的购物车功能,并提供具体的代码示例。创建数据库和数据表首先需要在MySQL数据库中创建一个用来存储商品信息的数据表。以下是一个简单的数据表

寻找抛物线的顶点、焦点和准线的C/C++程序寻找抛物线的顶点、焦点和准线的C/C++程序Sep 05, 2023 pm 05:21 PM

Asetofpointsonaplainsurfacethatformsacurvesuchthatanypointonthatcurveisequidistantfromapointinthecenter(calledfocus)isaparabola.Thegeneralequationfortheparabolaisy=ax2+bx+cThevertexofaparabolaisthecoordinatefromwhichittakesthesharpestturnwhereasaisth

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft