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

来源：懂视网责编：小采时间：2020-11-27 22:20:40

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

vue 2.0 购物车小球抛物线的示例代码:本文介绍了vue 2.0 购物车小球抛物线的示例代码，分享给大家，具体如下：备注：此项目模仿饿了吗。我用的是最新的Vue, 视频上的一些写法已经被废弃了。布局代码 <div class=ball-container> <transition name=drop

推荐度：

点击下载本文 文档为doc格式

导读vue 2.0 购物车小球抛物线的示例代码:本文介绍了vue 2.0 购物车小球抛物线的示例代码，分享给大家，具体如下：备注：此项目模仿饿了吗。我用的是最新的Vue, 视频上的一些写法已经被废弃了。布局代码 <div class=ball-container> <transition name=drop

本文介绍了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()。方法请阅读这篇文章//www.gxlcms.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次点击的地方做过度效果。

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推荐度：

点击下载本文 文档为doc格式

标签： VUE 购物车代码

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐