uniapp 加入购物车实现贝塞尔曲线(仅支持H5, APP没测试)

我都没吃饱

已于 2024-05-09 16:08:32 修改

阅读量787

点赞数 10

文章标签： uni-app

于 2024-04-20 11:37:41 首次发布

本文链接：https://blog.youkuaiyun.com/Guanchong333/article/details/137993904

版权

前言:

在移动端电商应用中，一个流畅而美观的购物车添加动画能够显著提升用户体验，增加用户对商品的购买决策。特别是在 Uni-app 这样的跨平台开发框架下，如何实现这样的购物车动画成为了开发者关注的重要问题。

Uni-app 是基于 Vue.js 的一款跨平台应用开发框架，它支持一次编写多端运行，包括小程序、H5 网页和App等。在这篇博客中，我们将探讨如何利用 Uni-app 实现购物车动画效果，重点是实现仿美团添加购物车时的贝塞尔曲线动画效果。

本文将介绍实现购物车动画效果的基本思路和技术细节，通过 Vue 组件和动画特性来展示如何创建流畅且有趣的购物体验。让我们一起开始探索吧！

实现步骤:

简单来说就说就是知道三个元素的位置: 一是点击加号的按钮, 二是购物车的位置, 三是点击加号的icon, 下面来看代码。

代码实现: (没有封装组件,正在做,嘻嘻~)

首先是HTML 部分:

// 点击加号的部分

 <view
    class="addToCart_item"
    :id="`id_${item.id}`"
     @click.stop="(e) => {addToCart(item, e)}"
   >
      <image
        src="/static/image/addition.png"
        mode="scaleToFill"
       />
 </view>

// 底部购物车部分
<view class="left_icon">
    <text
       class="icon_num"
       v-s