antd mobile,swiper组件结合栅格,实现数据展示
后台请求出一组数据,想要让他们以走马灯的形式展示,并且每一页展示四条数据,如何实现
1.将请求到的数据做处理,做到每次展示出四条数据
const newArr=[]
for (var i = 0, j = requestData.length; i < j; i += 4) {
newArr.push(requestData.slice(i, i + 4));
}
//数据以每四条一个数组,放在一个新数组里
2.定义要渲染的样式
const item = newArr.map((item, index) => (
<Swiper.Item key={index}>
<Grid columns={2} gap={8}>
{item.map((item: any) => (
<Grid.Item
onClick={async () => {
history.push({
pathname: `/`, //跳转的路径
query: { id: item.id }, //跳转传参
});
}}
>
<Image src="/icon/index/ico-soft.png"/>
{item.name}
</div>
</Grid.Item>
))}
</Grid>
</Swiper.Item>
))
//走马灯每一页会分别遍历处理过的数据,在将数据以栅格的形式,每页四条渲染
3.调用组件
<Swiper indicator={() => null}> {item} </Swiper>