（饿了么商家点餐页面Vue实战项目）Vue2.0商品详情页面复用商品列表页面购物车小球贝塞尔曲线飞入效果

原创

于 2020-07-12 18:51:02 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了如何在Vue2项目中实现商品详情页面及购物车小球飞入效果。首先创建food.vue作为商品详情组件，并在商品列表页面goods.vue中引用。接着，通过在food.vue中监听加入购物车事件并调用cartcontrol组件的贝塞尔曲线动画，实现小球飞入购物车的动态效果。同时，详细说明了如何在组件层级间复用此效果，涉及事件冒泡和组件通信，确保小球飞入购物车的视觉效果在商品列表页也能复现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

商品列表购物车小球飞入效果实现参照：
https://blog.csdn.net/weixin_40618068/article/details/98198377

一、创建food.vue，作为商品详情页面组件，在goods.vue（商品列表）页面引用。点击具体商品跳转到商品详情页。
food.vue的html代码如下：

<template>
    <transition name="move">
        <div v-show="showFlag" class="food" ref="food">
            <div class="food-content">
                <div class="image-header">
                    <img class="food-img" :src="food.image">
                    <div class="back" @click="hide">
                        <i class="icon-arrow_lift"></i>
                    </div>
                </div>
                <div class="content">
                    <h1 class="title">{
   
   {
   
   food.name}}</h1>
                    <div class="detail">
                        <span class="sell-count">月售{
   
   {
   
   food.sellCount}}份</span>
                        <span class="rating">好评率{
   
   {
   
   food.rating}}%</span>
                    </div>
                    <div class="price">
                        <span class="now">¥{
   
   {
   
   food.price}}</span><span class="old" v-show="food.oldPrice">¥{
   
   {
   
   food.oldPrice}}</span>
                    </div>
                </div>
                <div class="cartcontrol-wrapper">
                    <cartcontrol :food="food" @cart-add="handlecartAdd"></cartcontrol>
                </div>
                <transition name="fade"