作为一名前端给自己做一个算命转盘不过分吧给自己做了一个算命转盘，有事没事算算命挺好的。使用技术React + ts，搭配

算命转盘

前言

给自己做一个算命转盘，有事没事算算命，看看运势挺好的（虽然我也看不懂）。

这个算命转盘我是实现在了自己的个人博客中的这里是地址，感兴趣可以点进去看看。

实现过程

开发技术：react + ts

该转盘主要是嵌套了三层 圆形滚动组件 来实现的，再通过 ref 绑定组件，调用其中的 scrollTo 方法即可使组件发生指定的滚动，再传入随机数，即可实现随机旋转效果，通过嵌套三层该组件实现三层的随机旋转，模拟“算命”效果。

// 这是精简后的代码
export default () => {
  const onScrollCircle = () => {
    const index = Math.floor(Math.random() * zodiacList.length)
    scrollCircleRef.current?.scrollTo({index, duration: 1000})
  }
  return (
    <>
      <ScrollCircle ref={scrollCircleRef}></ScrollCircle>
      <button onClick={() => onScrollCircle}>点击旋转</button>
    </>    
  )
}   

• 转盘的第一层

export default () => {
  return (
    <ScrollCircle>
      {list.map((item, index) => (
        <ScrollCircle.Item
          key={index}
          index={index}
        >
          <CircleItem />
        </ScrollCircle.Item>
      ))}
    </ScrollCircle>
  )
}

• 转盘的第二层

const CircleItem = () => {
  return (
    <ScrollCircle>
    {list.map((item, index) => (
      <ScrollCircle.Item
        key={index}
        index={index}
      >
        <CircleItemChild />
      </ScrollCircle.Item>
    ))}
    </ScrollCircle>
  )
}

• 转盘的第三层

const CircleItemChild = () => {
  return (
    <ScrollCircle>
    {list.map((item, index) => (
      <ScrollCircle.Item
        key={index}
        index={index}
      >
        <div>
          内容
        </div>
      </ScrollCircle.Item>
    ))}
    </ScrollCircle>
  )
}

圆形滚动组件

现在的 圆形滚动组件 支持展示到上下左右中各个方向上，要是大家使用过程中有什么意见可以提一下，我尽力实现，当然能提 pr 最好了（∪^ェ^∪）。

组件源码地址

线上Demo演示地址

props等使用文档

ScrollCircle

属性名	描述	类型	默认值
listLength	传入卡片的数组长度	number	(必选)
width	滚动列表的宽度	string	"100%"
height	滚动列表的高度	string	"100%"
centerPoint	圆心的位置	"center" , "auto" , "left" , "right" , "bottom" , "top"	"auto (宽度大于高度时在底部，否则在右侧)"
circleSize	圆的大小	"inside" , "outside"	"outside (圆溢出包裹它的盒子)"

其他的属性...（篇幅问题就不全放上来了，可以直接去线上Demo演示地址查看）

centerPoint

主要通过该属性，将圆心控制到上下左右中间位置。

属性名	描述
auto	自动适应，当圆形区域宽度大于高度时，圆心会自动在底部，否则在右边
center	建议搭配 circleSize='inside' 一起使用（让整个圆形在盒子内部）
left	让圆心在左边
top	让圆心在顶部
right	让圆心在右边
bottom	让圆心在底部