使用react hooks 封装的圆形滚动组件

相关技术

react , hooks , ts

功能描述

根据用户的触摸，对卡片进行一个圆形的旋转滚动。

码上掘金 引入组件好像不支持ts类型会报错，所以功能函数就丢到一个文件里面了

使用

引入 ScrollRotate 组件，在需要使用的数据列表外包裹一层，传入 list 和该区域的高度 height ；内部的卡片需要使用 ScrollRotate.Item 包裹，并传入每个卡片的索引值。

<ScrollRotate list={list} height={`calc(100vh - 100px)`}>{list?.map((item,i) => (<ScrollRotate.Item key={item._id} index={i}><View className={`card`}><View className="cardTitle">{item.title}</View></View></ScrollRotate.Item>))}
</ScrollRotate> 

组件代码讲解

实现逻辑图

组件初始化

需要先获取 可滚动区域高度，卡片高度，圆的半径，卡片间的角度和可滚动区域占的度数的信息。

这里需要运用到 高中知识 ，通过 三角函数 和 角度 跟 弧度 的转化。

• 弧度 = 弧长 / 半径 = 角度 * π / 180; 弧长 = (角度 / 360) * 周长
• 求sin 例: const sin30 = Math.sin(30 * Math.PI / 180) // 0.5 sin30度
• 求角度 例: const deg_30 = 180 * Math.asin(1 / 2) / Math.PI // 30度

例：比如这里要计算两个卡片间的角度

代入求角度的公式就是: a的度数 = 180 * Math.atan((w / 2) / (r - h / 2)) / Math.PI

这里和实际组件中的代码的宽和高写反了（w和h）