九宫格布局使用了flex,两个和多个元素排版样式问题。
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了九宫格布局使用了flex,两个和多个元素排版样式问题。相关的知识,希望对你有一定的参考价值。
参考技术A 九宫格布局使用了flex,排版样式,使用一个空div,style="visibility: hidden;"的时候会对齐每一个元素,但是遇到2,5,8,11,14..... 这种等差数列的时候,要按需的显示空的div,所以div应该这样写可以适应这种情况。因为九宫格的布局是justify-content: space-between;flex-wrap: wrap;。如果元素的长度是等差数列的情况是不会并靠在一起的。我们需要一个空的div来控制样式,然后在按需的时候再显示。boxList.length数组的长度 % 3 == 2就满足了显示的需求。
React九宫格抽奖
思路:
一、.九宫格,8个奖项,中心1个抽奖按钮。
二、转的方向是顺时针,也就是说转的顺序如图:0-1-2-3-4-5-6-7。
0 | 1 | 2 |
7 | 奖 | 3 |
6 | 5 | 4 |
三、如何排版?
1.如果flex排版:
优点:样式布局简单点;
缺点:数据和旋转的顺序不一致,可以处理数据改变数据的排序,后续获得奖项,转到对应的位置,又需要处理一次数据。
2.绝对定位:
优点:把数据通过定位的方式,让数据和旋转顺序一致,数据操作简单。
缺点:9个宫格需要一个个定位,稍微麻烦一点。
刚开始选择的flex布局,后来后端交互的时候,只返回中奖奖品名称。需要做过多的数据处理。最终选择了绝对定位。
四、设计一个定时器,接受3个参数: position-起始序号, result-结果序号, speed-速度。
1.当用户点击抽奖,设置0位置开始,设置一个大于30s的result,设置一个speed速度,开启定时器,请求抽奖接口,返回结果后,清除定时器,并获取此时转盘停止的奖项序号。
2.再次设置一个慢一点的速度,开启定时器,传入起始位置,算出停止位置距离0位置的补差个数,result=补差个数+中奖结果的序号,设置一个慢一点speed速度,再把他转完。
代码
一、请求后端接口,获取8个项品,处理数据,然后css去定位九宫格
// 定义timer定时器,按钮状态可点击 constructor(props) { super(props); this.timer; this.state = { dataSource: [], isDisabled: false, prizeName: ‘‘ } }
// componentWillReceiveProps生命周期中处理 if(data){ data.map((v,i)=>{ Object.assign(v,{ isActive: false, index: ‘s1‘, classText: ‘p1‘ }); }) data[0].isActive = true; this.setState({ data }); } // render中 return() <div className="draw-section"> {dataSource && dataSource.map((v, i) => ( <div key={v.id} className={v.isActive ? `draw-item active p${i}` : `draw-item p${i}`} > <img src={v.imgUrl} alt="" /> <p className=‘item-prize-name‘>{v.prizeName}</p> </div> )) } <div className="draw-item draw-btn"> <input type="button" className="btn" onClick={this.handleClick} disabled={this.state.isDisabled} /> <p className=‘draw-times‘>抽奖次数*{this.state.total}</p> </div> </div>
二、点击抽奖,执行handleClick方法。
this.start(0, 999999, 50); // 开启定时器,转盘转动 this.draw(); // 发起一个请求,获取奖品
start = (position, result, speed) => { // position-起始序号 result-结果序号 speed-速度 this.round = 0; // 总次数 this.active = position; // 起始位置 const { dataSource } = this.state; // console.log(‘dataSource‘, dataSource); this.timer = setInterval(() => { if (this.round < result) { if (this.active === 7) { this.active = 0; } else { this.active += 1; } this.round += 1; for (let i = 0, l = dataSource.length; i < l; i += 1) { if (i === this.active) { dataSource[i].isActive = true; } else { dataSource[i].isActive = false; } } this.setState({ dataSource, activeIndex: this.active }); // console.log(‘timer‘, this.active); } else { setTimeout(() => { this.setState({ prizeModal: true, isDisabled: false }); }, 1000); clearInterval(this.timer); } }, speed); }
三、接口返回结果后,在componentWillReceiveProps生命周期中,延时2s清除第一个定时器,接着开启新的定时器转到中奖位置。
setTimeout(() => { const { activeIndex } = this.state; // 清除定时器 clearInterval(this.timer); // 获取清除上一次定时器时停在的activeIndex为开启下一个定时器起始位置,并补上未转一整圈的个数, this.start(activeIndex, (8 - activeIndex) + resultIndex, 400); }, 2000);
四、其他需要考虑的,如果接口30s超时,转盘会一直转,返回异常则清除定时器。
以上是关于九宫格布局使用了flex,两个和多个元素排版样式问题。的主要内容,如果未能解决你的问题,请参考以下文章