移动端swiper结合栅格布局

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>