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

相关技术

react , hooks , ts

功能描述

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

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

使用

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

{list?.map((item,i) => ({item.title}))}
 

组件代码讲解

实现逻辑图

组件初始化

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

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

• 弧度 = 弧长 / 半径 = 角度 * π / 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）

useEffect(() => { /** 获取card的信息 */ const getCardH = async () => {const cWrapH = document.querySelector(`.comScrollCircleWrap`)?.clientHeight ?? 0info.current.circleWrapHeight = cWrapHconst cInfo = document.querySelector(`.comScrollCircle-cardWrap`)info.current.cardH = cInfo?.clientHeight ?? 0const cW = cInfo?.clientWidth ?? 0info.current.circleR = Math.round(systemInfo.screenHeight)// 卡片间的角度cardDeg.current = 2 * 180 * Math.atan(((info.current.cardH ?? 0) / 2) / (info.current.circleR - cW / 2)) / Math.PI + cardAddDeg// 屏幕高度对应的圆的角度info.current.scrollViewDeg = getLineAngle(info.current.circleWrapHeight, info.current.circleR)console.log(`可滚动区域高度: ${info.current.circleWrapHeight};\n卡片高度: ${info.current.cardH};\n圆的半径: ${info.current.circleR};\n卡片间的角度: ${cardDeg.current}度;\n可滚动区域占的度数: ${info.current.scrollViewDeg}度;`);setRotateDeg(cardDeg.current * initCartNum) } if(list?.length) {setTimeout(() => {getCardH()}, 10); } }, [list, cardAddDeg]) ```

给每个卡片设置初始样式

由于我这里每个卡片是一开始直接定位到一个圆上的，所以组件初始化后，需要计算出每个卡片的 top left 和 rotate，这里其实也是一些三角函数的处理了。

const cardStyle = useMemo(() => {const deg = 90 + cardDeg * indexconst top = circleR * (1 - Math.cos(deg * Math.PI / 180))const left = circleR * (1 - Math.sin(deg * Math.PI / 180))const rotate = 90 - deg// console.log(top, left, rotate);return {top: `${top}px`, left: `${left}px`, transform: `translate(-50%, -50%) rotate(${rotate}deg)`}
}, [circleR, cardDeg]) 

由于这里两个组件需要共享数据，item需要使用list的数据，所以这里使用 useContext

组件间共享数据的封装说明（精简）

首先需要创建一个上下文对象。

const ScrollCircleCtx = React.createContext({circleR: 0,cardDeg: 0
}) 

然后最外层组件 使用上下文对象的 Provider 包裹。

const ScrollCircle = () => {return ({children})
} 

item 组件使用 useContext() 获取上下文数据。

const ScrollRotateItem = () => {const {circleR, cardDeg} = useContext(ScrollCircleCtx)return (
{children}
)
} 

触摸旋转滚动

监听鼠标的事件 onMouseDown , onMouseMove , onMouseUp 和 onMouseLeave 事件。如果是移动端的话改成 onTouchStart , onTouchMove 和 onTouchEnd 即可。

{children}
 

onTouchStart

记录鼠标点击初始化的信息

const onTouchStart = (e: React.MouseEvent) => {touchInfo.current.isTouch = truetouchInfo.current.startY = e.clientYtouchInfo.current.startDeg = rotateDegtouchInfo.current.time = Date.now()
} 

onTouchMove

根据触摸移动的距离，计算出应该旋转的角度，我这里的计算公式为：

初始位置的角度 + (触摸距离 / 可触摸的整个区域高度) * 触摸区域高度所占的角度

我这里的惯性滚动效果是采用 transition 里面的 ease-out 来简单实现的。

const onTouchMove = (e: React.MouseEvent) => {if(!touchInfo.current.isTouch) {return}const y = e.clientY - touchInfo.current.startYconst deg = Math.round(touchInfo.current.startDeg - info.current.scrollViewDeg * (y / info.current.circleWrapHeight))setRotateDeg(deg)
} 

onTouchEnd

当触摸结束时，该次触摸如果小于300ms，且触摸距离大于卡片高度一半的话，则表示用户的该次触摸是快速滚动，则需要旋转更多的角度，这里的计算和上面 move 的同理。

const onTouchEnd = (e: React.MouseEvent) => {const {startY, startDeg, time } = touchInfo.current// 移动的距离const _y = e.clientY - startY// 触摸的时间const _time = Date.now() - timelet deg = rotateDeg// 触摸的始末距离大于卡片高度的一半，并且触摸时间小于300ms，则触摸距离和时间旋转更多if((Math.abs(_y) > info.current.cardH / 2) && (_time < 300)) {// 增加角度变化 const v = _time / 300const changeDeg = info.current.scrollViewDeg * (_y / info.current.circleWrapHeight) / vdeg = Math.round(startDeg - changeDeg)}// 处理转动的角度为：卡片的角度的倍数 (_y > 0 表示向上滑动)const _deg = cardDeg.current * Math[_y > 0 ? 'floor' : 'ceil'](deg / cardDeg.current)setRotateDeg(_deg)touchInfo.current.isTouch = false
} 

完整使用样例

import { useState, useEffect } from 'react';
import './index.scss';
import ScrollRotate from './scrollRotate';

export default () => {const [list, setList] = useState([])useEffect(() => {init()}, [])/** 初始化获取数据 */const init = async () => {setTimeout(() => {const newList = new Array(23).fill('Tops').map((a,i) => ({_id: 'id' + i, title: a + i}))setList(newList)}, 300);}return (
{list?.map((item,i) => (
{item.title}))}
{}}>
T
C
B
)
} 

完整代码

组件代码比较长，就保存到 码上掘金 了。

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享