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://www.cnblogs.com/limei...
说明:
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次点击的地方做过度效果。
原文地址:https://segmentfault.com/a/1190000013081705
vue 2.0 购物车小球抛物线的更多相关文章
- vue.js加入购物车小球动画
生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画 动画的内容分别是外层和内层,外层控制动画小 ...
- Vue实现购物车小球动画
思路: 1.因页面分组件分的比较细,由图可知是组件5到组件4的联动. 如果利用组件间通信需要 子组件5 -->组件3-->所有组件的父组件-->组件4, 层级略显复杂,所以使用了vu ...
- 使用vue模拟购物车小球动画
使用vue模拟购物车小球动画 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> < ...
- Vue实现购物小球抛物线
.shop{ position: fixed; top: 300px; left: 40px; } .ball{ position: fixed; left: 32px; bottom: 22px; ...
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...
- vue组件初学--弹射小球
1. 定义每个弹射的小球组件( ocicle ) 2. 组件message自定义属性存放小球初始信息(可修改) { top: "0px", //小球距离上方坐标 left: &qu ...
- vue.js实现购物车功能
购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...
- 用vue.js实现购物车功能
购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...
- 使用 Vue 2.0 实现服务端渲染的 HackerNews
Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.v ...
随机推荐
- [Angular] Introduce to NGXS
Went though tow youtube videos about NGXS https://angularfirebase.com/lessons/ngxs-quick-start-angul ...
- [SCSS] Convert SCSS Variable Arguments to JavaScript
We will learn how to convert variable arguments by using rest operator in JavaScript. .sass-btn { co ...
- [Angular] Performance Caching Policy - Cache First, Network Last
If you want to cache API response by using angular service-worker, you can do it in: src/ngsw-config ...
- poj2299--归并排序求逆序数
/** \brief poj2299 * * \param date 2014/8/5 * \param state AC * \return memory 4640K time 3250ms ...
- hdu2276---Kiki & Little Kiki 2(矩阵)
Problem Description There are n lights in a circle numbered from 1 to n. The left of light 1 is ligh ...
- 6581 Number Triangle
6581 Number Triangle 时间限制:500MS 内存限制:1000K提交次数:57 通过次数:47 题型: 编程题 语言: G++;GCC Description 7 3 8 8 ...
- 使用Lucene对预处理后的文档进行创建索引(可执行)
时间: 2015/3/18 杨鑫newlife 对于文档的预处理后.就要開始使用Lucene来处理相关的内容了. 这里使用的Lucene的过程例如以下: 首先要为处理对象机那里索引 二是构建查询对象 ...
- C++求解汉字字符串的最长公共子序列 动态规划
近期,我在网上看了一些动态规划求字符串最长公共子序列的代码.可是无一例外都是处理英文字符串,当处理汉字字符串时.常常会出现乱码或者不对的情况. 我对代码进行了改动.使用wchar_t类型存储字 ...
- LeetCode Weekly Contest 19
1.504. Base 7 水题,直接写.但是我错了一次,忘了处理0的情况. 没有考虑边界条件.写完代码,一般需要自己想几个边界测试用例进行测试. class Solution { public: s ...
- TensorFlow-mnist
训练代码: from __future__ import absolute_import from __future__ import division from __future__ import ...