从本篇文章开始记录uniapp实战仿写网易云音乐项目的过程，主要会写一下关键步骤和难点，本专栏会保持持续更新，并在最后送上源码，感兴趣的可以订阅本专栏。本篇主要实现的是首页tab栏以及图片滚动区域。

首先要在page.json中配置页面和导航栏： pages页面，这里有五个页面

tabBar配置导航栏，五个页面五个导航栏，注意这里每个导航栏都有未选中的图片和选中的图片：

一般在项目中都会配置一些公共样式，比如一些页面或者组件的样式，还有这里用到的iconfont样式 一般单独文件存放公共样式 然后在App.vue页面进行引入：

另外我们还需要去掉uniapp的头部内容： 我们只需要在page.json中加上这块代码就行 ，关闭标题显示

轮播图我们使用uniapp自带的swiper组件，详细用法可以参考官方文档 链接 我们首先先把需要轮播的图片数据获取到：

然后编写轮播图

最后看实现的轮播图效果： 最后看看本文实现的最后效果：

本文内容到这里就结束了，下期会带大家继续完成首页部分的功能和一些细节，并且完成api的封装。