作为一名前端给自己做一个算命转盘不过分吧

算命转盘

前言

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

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

实现过程

开发技术：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

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

centerPoint

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