AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

react函数组件购物车小球动画实现

2023-12-13 71
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： react函数组件购物车小球动画实现

6b99379303bd4c95b1b31f0202e914d8.png

347aa73156004d549f24dec204e94705.png

182d4b96104b46acb89699e37df57119.png

先上完整代码仅供参考

之后首先第一步我们需要通过useRef这个函数组件的hooks创建一个ref对象让他绑定在我们需要将小球动画移动到的位置的元素上

cdd328b43b26492d918e5deaaaecc2c5.png

3fca2e7287154cb4b1f55b823443864f.png

之后 创建小球 这里的创建小球函数接收两个参数 分别为 当我们点击添加按钮时候的X和Y轴坐标

298f0f4815504110aea3e9206acf26d0.png

之后在添加方法中 我们传递一个ev事件对象 然后通过这个ev事件对象获取到当前点击的X轴Y轴坐标的值 并且传递给我们的创建小球函数

5b191c95ceef4e78889fb4cd6ea7a373.png

6dfbabc6831a4c0e90dcdb15368e7cbb.png

之后就OK了

效果演示 样式太丑了。。。不要在意

e58a3de179674c5bb639358e4808229e.gif

文章标签：
前端开发
关键词：
React Native函数
React Native函数组件
React Native购物车
react.js组件
react.js函数
DazingAndBusy
目录
相关文章
六卿
|
11天前
|
前端开发 JavaScript 网络架构
react对antd中Select组件二次封装
本文介绍了如何在React中对Ant Design（antd）的Select组件进行二次封装，包括创建MSelect组件、定义默认属性、渲染Select组件，并展示了如何使用Less进行样式定义和如何在项目中使用封装后的Select组件。
六卿
31 2
react对antd中Select组件二次封装
六卿
|
11天前
|
前端开发
React给antd中TreeSelect组件左侧加自定义图标icon
本文介绍了如何在React中为Ant Design的TreeSelect组件的每个树节点添加自定义图标，并解决了因缺少key属性而导致的警告问题，展示了如何通过递归函数处理treeData数据并为每个节点添加图标。
六卿
21 2
React给antd中TreeSelect组件左侧加自定义图标icon
六卿
|
11天前
|
前端开发
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
本文介绍了在React项目中如何添加路径别名alias以简化模块引入路径，设置组件props的默认值，以及如何二次封装Ant Design的Modal组件。文章还提供了具体的代码示例，包括配置Webpack的alias、设置defaultProps以及封装Modal组件的步骤和方法。
六卿
27 1
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
尹正杰
|
1月前
|
消息中间件 前端开发
React技术栈-组件间通信的2种方式
本文介绍了React技术栈中组件间通信的两种方式：通过props传递数据和使用消息发布（publish）-订阅（subscribe）机制，并通过实例代码展示了如何使用PubSubJS库实现跨组件通信。
尹正杰
46 11
React技术栈-组件间通信的2种方式
kgmh2cwvierzy
|
7天前
|
前端开发 JavaScript 区块链
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总
本文介绍了多个React开发中常见的问题及其解决方案，包括但不限于：1）`useForm`实例未连接到任何`Form`元素的警告及解决方法；2）监听页面滚动事件的实现方式；3）React 18与antd 5.8.6中定制主题的方法；4）React结合antd 4.x版本自定义主题色的步骤；5）解决`ResizeObserver loop`相关报错的技巧；6）处理React设计表单时遇到的CDN资源加载失败问题；7）解决onClick事件传参问题；8）修复类型错误等。每部分均提供详细分析与实用代码示例，帮助开发者快速定位并解决问题。
kgmh2cwvierzy
9 2
尹正杰
|
1月前
|
前端开发 Python
React技术栈-React路由插件之自定义组件标签
关于React技术栈中React路由插件自定义组件标签的教程。
尹正杰
45 4
React技术栈-React路由插件之自定义组件标签
六卿
|
11天前
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念，包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
六卿
15 2
天下第一二
|
14天前
|
前端开发
react学习(22)高阶函数和函数柯里化
react学习(22)高阶函数和函数柯里化
天下第一二
24 1
天下第一二
|
18天前
|
前端开发
react学习（15）函数式组件中使用props
react学习（15）函数式组件中使用props
天下第一二
38 7
天下第一二
|
18天前
|
前端开发
react学习（14）类式组件的构造器与props
react学习（14）类式组件的构造器与props
天下第一二
41 6