vue 2.0 购物车小球抛物线的示例代码


Posted in Javascript onFebruary 01, 2018

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

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

布局代码

<div class="ball-container">
 <transition name="drop"
       v-for="ball in balls"
       @before-enter="beforeDrop"
       @enter="dropping"
       @after-enter="afterDrop">
  <div v-show="ball.show" class="ball" v-bind:css="false">
   <div class="inner inner-hook" ></div>
  </div>
 </transition>
</div>

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('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()。方法请阅读这篇文章https://3water.com/article/134208.htm

说明:

goods 是一个组件,里面包含menu(div) , foods(div), 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次点击的地方做过度效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
package.json各个属性说明详解
Mar 11 Javascript
详解Node.JS模块 process
Aug 31 Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 #Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 #Javascript
JS 实现百度搜索功能
Feb 01 #Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 #Javascript
微信小程序日期时间选择器使用方法
Feb 01 #Javascript
NW.js 简介与使用方法
Feb 01 #Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 #Javascript
You might like
PHP6新特性分析
2016/03/03 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
一个JQuery操作Table的代码分享
2012/03/30 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
微信小程序如何实现五星评价功能
2019/10/15 Javascript
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
Python包和模块的分发详细介绍
2020/06/19 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
美国渔具店:FishUSA
2019/08/07 全球购物
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
Java如何格式化日期
2012/08/07 面试题
会计电算化专业毕业生自荐信
2013/12/20 职场文书
企业安全生产承诺书
2014/05/22 职场文书
家长会欢迎标语
2014/06/24 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
出生医学证明书
2014/09/15 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS