reactjs 如何在react和react native中以这种模式显示平面列表?

2fjabf4q  于 2022-11-04  发布在  React
关注(0)|答案(1)|浏览(241)

我想用这个样式和顺序呈现平面列表。有人能给我建议吗?

lf5gs5x2

lf5gs5x21#

这个想法是把你的数组分解成许多更小的数组,每个数组都是1行,每一行都有条件地颠倒位置。

  • 下面的示例是对逻辑的描述,您必须使用reactjs亲自执行 *
// You start with array with "n" items and x item per row
let n = 10; let x = 3;
let flat_list = Array(n).map((_,index) => `n${index+1}`) // ['n1', 'n2', ...]

// Calculate number of rows need to be render
let number_of_rows = Math.floor(n/x) + 1;

// Render a row
return Array(number_of_rows).map((_,rowIndex)=>{
  // Check row is odd or even
  let rowIsOdd = rowIndex % 2 === 1; 

  // Get data for row.
  let row_data = flat_list .slice(rowIndex * x, (rowIndex + 1) * x);

  // Filling data
  if (cols.length < perRow) cols = [...cols, ...Array(perRow - cols.length)];

  // Reverse data when row is odd
  if (rowIsOdd) row_data = row_data.reverse();

  // Render each item in row
  return Array(x).map((_,colIndex)=>{
    // Get your data
    let data = row_data[colIndex];

    // Render your item
    return <div>{data}</div>;
  })
})
  • 此代码是一个与n=10x=3一起使用anbox示例,其中某些样式组件包括箭头 *

相关问题