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 相关文章推荐
JQuery 学习笔记 选择器之二
Jul 23 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 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
多文件上载系统完整版
2006/10/09 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
this和执行上下文实现代码
2010/07/01 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
处理Python中的URLError异常的方法
2015/04/30 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
Python多线程多进程实例对比解析
2020/03/12 Python
Python __slots__的使用方法
2020/11/15 Python
python 发送get请求接口详解
2020/11/17 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
经济管理毕业生求职信
2014/03/15 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
自主招生专家推荐信
2015/03/26 职场文书
喋血孤城观后感
2015/06/08 职场文书
班主任远程培训研修日志
2015/11/13 职场文书