uniapp｜商品列表加入购物车实现抛物线动画效果、上下左右抛入、多端兼容(H5、APP、微信小程序)

以uniapp框架为基础，详细解析商品列表加入购物车抛物线动画的实现方案。通过动态获取商品点击位置与购物车坐标，结合CSS过渡动画模拟抛物线轨迹，实现从商品图到购物车图标的动态效果。

核心实现原理

坐标动态计算

1. 触点定位，通过事件对象获取点击位置坐标：

addToCart(event) {const { x, y } = event.detail // 获取触点坐标this.startPoint = { x, y }
}

2. 目标定位，使用uniapp节点查询API获取购物车按钮位置：

const query = uni.cre