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 相关文章推荐
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
js实现适配移动端的拖动效果
Jan 13 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
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
javascript 常用功能总结
2012/03/18 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
document.write的几点使用心得
2014/05/14 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
详解Angular的8个主要构造块
2017/06/20 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
简单的React SSR服务器渲染实现
2018/12/11 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
python获取远程图片大小和尺寸的方法
2015/03/26 Python
ubuntu上安装python的实例方法
2019/09/30 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
医院门卫岗位职责
2013/12/30 职场文书
有趣的广告词
2014/03/18 职场文书
写给领导的感谢信
2015/01/22 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
深入理解python协程
2021/06/15 Python
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫