获取轮播图数据，数据类型定义并渲染，轮播图思路总汇

1.封装获取轮播图数据API

2.页面初始化调用API

下面根据接口文档写代码

1.定义轮播图数据类型

2.指定类型并传值给子组件

3.渲染轮播图数据

根据接口文档

类型声明：

存放路径：`src/types/home.d.ts`

```ts
/** 首页-广告区域数据类型 */
export type BannerItem = {
/** 跳转链接 */
hrefUrl: string
/** id */
id: string
/** 图片链接 */
imgUrl: string
/** 跳转类型 */
type: number
}

 

 参考这个格式所以http<数组> 我们这个数据就要填入result

 

 

这里我们参考之前写过的请求测试

 这里我们开始接收渲染，现在开始这个图片就是从后台接受的了

 

 最后我们来看一下是否成功，这里的已经变成了长度为5的数组说明从后台获取数据成功，图片也变成五张，滑动会高亮

 总结：