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

大厂技术  高级前端  Node进阶

点击上方 程序员成长指北，关注公众号

回复1，加入高级Node交流群

算命转盘

zodiac.gif

前言

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

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

实现过程

开发技术：react + ts

该转盘主要是嵌套了三层 圆形滚动组件^[2] 来实现的，再通过 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 最好了（∪^ェ^∪）。

组件源码地址^[3]

线上Demo演示地址^[4]

image.png

主要是在旧版的基础上不断完善而来的，旧版圆形滚动组件的 往期文章^[5]

props等使用文档

ScrollCircle

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

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

centerPoint

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

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

作者：滑动变滚动的蜗牛

https://juejin.cn/post/7254014646779428922

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

“分享、点赞、在看” 支持一下