搜索
首页web前端js教程vue实现购物车的小球抛物线效果详解

这次给大家带来vue实现购物车的小球抛物线效果详解,vue实现购物车小球抛物线的注意事项有哪些,下面就是实战案例,一起来看一下。

本文介绍了vue 2.0 购物车小球抛物线的示例代码,分享给大家,具体如下:

备注:此项目模仿 饿了吗。我用的是最新的Vue, 视频上的一些写法已经被废弃了。

布局代码

<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代码(使用stylus写法)

.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代码

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()。方法请阅读这篇文章http://www.jb51.net/article/134208.htm

说明:

goods 是一个组件,里面包含menu(p) , foods(p), shopcart(购物车组件)。其中foods 包含cartcontrol(即小球组件)

组件之间的通信:说明:菜单和商品

第1个问题:小球,需要获取所点击的商品的数量。

利用Vue的props,将foods值传递给cartcontrol。但是这样有个问题。即子组件更新,无法同步回父组件。且,在子组件中,对food注册了一个count属性,此属性也无法同步回父组件(goods)。

解决方法:

导入全局的Vue。

利用Vue.set(target,key,value); 对 target注册count;

第2个问题:小球点击,将所点击过的商品数目传递给 shopcart。

在goods的 computed:{} 定义一个方法,将该方法以props的方式,传递给shopcart。

因为,shopcart,对传递过去的数据仅数据运算(不会改变)。因此不用同步会父组件。

第3个问题:购物车小球做抛物线运动。

对于购物车小球做抛物线运动。首先,落点都在购物车,小球则是随机的。要做抛物线运动,就要获取,所点击的 + 号的x,y位置。其次,抛物线运动,只有在enter--> enter-to这段期间有,在leave--> leave-to 期间是没有的,因此,需要用Vue提供的钩子函数。

获取 + 号x,y 位置:

小球(cartcontrol)是子组件。需要把数据传递给 goods(父组件)。可以使用Vuex,或者直接使用事件总线。对于饿了吗demo。直接使用事件总线。

创建一个 空的Vue。在 cartcontrol 中 ,通过 Bus.$emit(key, ... arg); 注册一个监听,然后再父组件 通过Bus.$on(key, function(... arg));监听此方法。将所操作的 dom 对象传递过去即可

Vue提供的钩子

这里要说明一点,Vue在他的官网,对于只有过度的js,done是必须的,当我加上done的时候,after-enter方法无法被执行。
还有1个问题,Vue官网推荐,只有过度效果,在做过度动画的元素上加上v-bind:class='false'。之前没加,出现了,小球只能在第1次点击的地方做过度效果。                                        

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Vue.js中组件使用详解

mysql连接池怎样使用事务自动回收(附代码)

以上是vue实现购物车的小球抛物线效果详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系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

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器