好资源导航 » 文章资讯 » vue 2.0 购物车小球抛物线的示例代码

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

2023-09-16 23:34:05 46

本文介绍了vue2.0购物车小球抛物线的示例代码，分享给大家，具体如下：

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

布局代码

css代码（使用stylus写法）

.ball-container
.ball
positionfixed
left32px
bottom22px
z-index200
transitionall0.4scubic-bezier(0.49,-0.29,0.75,0.41)
.inner
width16px
height16px
border-radius50%
background-colorrgb(0,160,220)
transitionall0.4slinear

js代码

data(){
return{
balls:[
{
show:false
},
{
show:false
},
{
show:false
},
{
show:false
},
{
show:false
}
],
dropBalls:[]
};
},
methods:{
drop(el){
for(leti=0;i{
el.style.webkitTransform='translate3d(0,0,0)';
el.style.transform='translate3d(0,0,0)';
letinner=el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform='translate3d(0,0,0)';
inner.style.transform='translate3d(0,0,0)';
});
},
afterDrop(el){
letball=this.dropBalls.shift();
if(ball){
ball.show=false;
el.style.display='none';
}
}
}

getBoundingClientRect()。方法请阅读这篇文章https://www.nhooo.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次点击的地方做过度效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐