美文网首页
大转盘-react组件

大转盘-react组件

作者: 马贞晓 | 来源:发表于2018-02-28 22:51 被阅读0次

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


    大转盘.png

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


    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;
    
    1. 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;
      }
    }
    
    }
    

    相关文章

      网友评论

          本文标题:大转盘-react组件

          本文链接:https://www.haomeiwen.com/subject/wzkwxftx.html