项目需要,未搜到类似的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;
- 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;
}
}
}
网友评论