H5W3
当前位置:H5W3 > 问答 > 正文

flex动态布局

目前遇到的问题是 后端返回一个list,list里面有多条数据,每条数据上都有一个属性 标识位置。 目前前端需要实现根据返回数据属性的不同,左右展示两列数据,属性为left的展示在左侧 属性为right的展示在右侧,然后依次向下排版。

这个应该怎么实现呢? 请各位大神帮忙分析下。

回答

比较简单的办法,是维护两个数组,一个放left的数据,一个放right的数据,通过flex控制左右两个大容器的布局,容器内部从上到下的布局由容器自己控制,数据就是刚才的那两个数组

假设一行放两条数据,一个左一个右,
那我们提前依据属性对结果做一个排序,
把数据变成[左,右,左,右…]的样子,渲染在页面中就可以了吧。

let arr = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0],

data = [],
type = 1;

while (arr.length) {

let i = arr.indexOf(type),
    item = arr.splice(i, 1);
    data.push(item[0])
    type = (type === 1) ? 0 : 1;

}

未经允许不得转载:H5W3 » flex动态布局

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址