大转盘-react组件

最新推荐文章于 2023-10-18 19:16:30 发布

SimminonGarcia

最新推荐文章于 2023-10-18 19:16:30 发布

阅读量774

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5be93e15e51d4551ca67448d

版权

项目需要，未搜到类似的react的大转盘，所以简单写了一个简单功能。

github项目地址 github.com/mazhenxiao/… 布衣斋是一个共享项目将在项目完成后上线

class RotatePlay extends Component{
    state={
        startList:[],
        rotate:0
    }
    local={
        point:0,
        angle:0
    }
    componentDidMount(){
        let {startList} = this.props;
        this.setState({startList});
    }
    //模拟数据获取，具体参见yuanyang项目
    Ajax_getcurrent(){
         let num = parseInt(Math.random()*8)
         let da=[{id:num,txt:`${num}等奖`}];
        return da;
    }
    async Get_Angle(){
        let start = 3600;
        let {startList,rotate}=this.state;
        let {point,angle}=this.local;
        let j = 360/startList.length;
        let current = await this.Ajax_getcurrent();
        let id=startList.findIndex(d=>d.id==current[0].id) //判断应该转到大角度
        let end = -(rotate+point*angle+start+j*id);
        this.local = {...this.local,...{point:id,angle:j}};
        return end;
    }
    async Event_Click_Rotate(ev){

        let start = await this.Get_Angle();
        this.setState({rotate:start})
    }
    renderli=()=>{
        let {startList}=this.state;

        let h = 100/startList.length;
        let r = 1/startList.length;
        return startList.map((el,ind)=>{

            return <li style={{transform:`rotate(${ind*r}turn)`}} key={ind}>
                <img src="" width="50" height="50" />
                <p>{el.txt}</p>
            </li>
        })
    }
    render(){
        let {rotate}=this.state;
        return <div className="m-rotatePlay">
            <ul refs="MrotateDom" className="m-rotateDom" style={{transform:`rotate(${rotate}deg)`}}>
                {
                    this.renderli()
                }
            </ul>
            <p className="m-rotatePoint" onClick={this.Event_Click_Rotate.bind(this)}>抽奖</p>
        </div>
    }
}
export default RotatePlay;
复制代码

less代码,页面按照1/7.5 布局

@f:100rem;
.m-rotatePlay{
width:400/@f;height:400/@f;position: relative;top:0;left:0; margin:10/@f auto;
.m-rotateDom{
  width:100%;height:100%;border:#088 solid 1px;position: relative;top:0;left:0;
  transform: rotate(0deg);
  border-radius:50%;overflow: hidden;
  li{
    list-style: none;
    position: absolute;;
    top:0;left:0;text-align: center;
    width:100%;height:100%;
    transform-origin:50% 200/@f;

  }
  transition:transform 6s ease;
}
.m-rotatePoint{
  width:100/@f;height:100/@f;position: absolute;top:50%;left:50%;border:#ccc solid 1px;background:rgb(211, 139, 44);
  transform:translateX(-50%) translateY(-50%);text-align: center;line-height:100/@f;color:#fff;border-radius:50%;cursor: pointer;
  &:before{
    content:"";position: absolute;top:0;left:50%;width:20/@f;height:40/@f;background: burlywood;transform:translateX(-50%) translateY(-100%);
    clip-path: polygon(11px 0px, 0px 41px, 21px 41px);border:#ccc solid 1px;
  }
}

}
复制代码