場景:請求到數據之後打算使用瀑布流形式展示
在請求到數據之後,來創建瀑布流所需要的數據格式
//數據處理方法
_CreateFlexList=(list)=> {
//要現實的列數,可以動態設置
let columnCount = 2;
let FlexList = [];
// 創建列數空數組
for (let i = 0; i < columnCount; i++) {
FlexList.push([]);
// 按順序將每個元素放到每列裏面,保證瀑布流渲染元素出廠順序不變
for (let j = i; j < list.length; j += columnCount) {
FlexList[i].push(list[j]);
}
}
console.log(FlexList)
}
有了對應格式的數據之後,我們來渲染到頁面
<View classname='columnView'>
{
List && Array.from(List).map((data, index) => {
return (
<View key={index + "id"} classname='column'>
{
data.map((item) => {
return (
<View classname='item'>
<Text>{item.name}</Text>
<Image src={item.image} />
</View>
)
})
}
</View>
)
})
}
</View>
對應的css
.columnView {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
.column {
display: flex;
flex-flow: column wrap;
.item{
display: flex;
flex-direction: column;
align-items: center;
background-color: #ffffff;
border: 0.5PX solid rgba(0, 0, 0, 0.05);
border-radius: 4PX;
margin-bottom: 12PX;
}
}
}