九宫格布局使用了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,两个和多个元素排版样式问题。的主要内容,如果未能解决你的问题,请参考以下文章

【布局细节】让两个默认上下排列的同级组件元素放在同一行

flex和layout移动端布局

flex九宫格一点小思考

Flex实现九宫格

[RN] React Native 使用 FlatList 实现九宫格布局

ReactNative: 使用View组件创建九宫格