vue项目--仿网易云音乐（day3）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情

上一篇文章中，我们完成了页面中的轮播图组件，并且通过axios向本地服务器获取了图片数据,接下来我们将完成轮播图下面的四个图标组件

1. 同理，我们在companies文件夹中创建一个iconList.vue文件，用来编写图标内容，然后在HomeView.vue主页面文件夹中引入，注册，创建使用即可，由于这些图标在我们的本地接口文档中都有，所以我们不用到阿里巴巴矢量库中下载引入
2. 首先，我们在api文件中向外暴露一个getIconList方法用来获取图表数据，具体代码如下所示，注意http前面的是反引号

/* 获取icon图标得api */

export function getIconList(){
    return axios.get(`http://localhost:3000/homepage/dragon/ball`)
}

3. 拿到了icon数据之后我们在swiperList.vue文件的data中return一个iconList空数组，用来存储从接口中得到的icon图标，然后我们在mounted中通过async以及await获得数据并且赋值给iconList，具体代码如下图所示：

4. 赋值给iconList数组之后，我们就需要通过v-for循环iconList将图标数据渲染到页面上去了 ，由于我们接口中的图标数据不止四个，所以我们需要使用slice裁剪功能，从0到4，并且绑定一个key值，然后就可以通过使用插值表达式将每一个图标的名字显示出来，具体的代码如下图所示：

5. 这些图标和文字需要均匀排布和侧轴居中对齐，所以需要使用到flex横向排布以及flex-direction: column;align-items: center;，具体的css代码如下图所示：