uniapp实战仿写网易云音乐(一)—底部工具栏以及首页轮播图swiper的实现_uniapp底部导航栏 轮播图

前言

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

首页导航栏

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

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
	{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "uni-app",
			"app-plus":{
				"titleNView": false
			}
		}
	},
	{
		"path": "pages/video/video",
		"style": {
			"navigationBarTitleText": "uni-app"
		}
	},
	{
		"path": "pages/mine/mine",
		"style": {
			"navigationBarTitleText": "uni-app"
		}
	}
    ,{
           "path" : "pages/account/account",
           "style" :                                                                                    
           {
               "navigationBarTitleText": "",
               "enablePullDownRefresh": false
           }
           
       }
       ,{
           "path" : "pages/cloud/cloud",
           "style" :                                                                                    
           {
               "navigationBarTitleText": "",
               "enablePullDownRefresh": false
           }
           
       }
   ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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

"tabBar": {
		"color":"#888",
		"selectedColor":"#ff2419",
		"borderStyle":"white",
		"backgroundColor":"#f9f9f9",
		"list": [
			{
				"pagePath":"pages/index/index",
				"iconPath":"static/tab/t_1.png",
				"selectedIconPath":"static/tab/t_11.png",
				"text":"首页"
			},
			{
				"pagePath":"pages/video/video",
				"iconPath":"static/tab/t_2.png",
				"selectedIconPath":"static/tab/t_21.png",
				"text":"视频"
			},
			{
				"pagePath":"pages/mine/mine",
				"iconPath":"static/tab/t_3.png",
				"selectedIconPath":"static/tab/t_31.png",
				"text":"我的"
			},
			{
				"pagePath":"pages/cloud/cloud",
				"iconPath":"static/tab/t_4.png",
				"selectedIconPath":"static/tab/t_41.png",
				"text":"云村"
			},
			{
				"pagePath":"pages/account/account",
				"iconPath":"static/tab/t_5.png",
				"selectedIconPath":"static/tab/t_51.png",
				"text":"账号"
			}
		]
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

公共样式的配置

一般在项目中都会配置一些公共样式，比如一些页面或者组件的样式，还有这里用到的iconfont样式
一般单独文件存放公共样式

然后在App.vue页面进行引入：

<style lang="scss">
	/*每个页面公共css */
	@import url("./common/css/common.scss");
	@import url("./common/css/iconfont.css");
</style>
1
2
3
4
5

另外我们还需要去掉uniapp的头部内容：

我们只需要在page.json中加上这块代码就行 ，关闭标题显示

首页轮播图

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

methods: {
	getBanner() {
		uni.request({
			url: 'http://localhost:3000/banner',
			method: 'GET',
			success:(res)=>{
				this.swiper = res.data.banners;
			}
		})
	}
}
1
2
3
4
5
6
7
8
9
10
11

然后编写轮播图

<!-- 轮播 -->
<view class="banner">
	<swiper :indicator-dots="true" 
	        :autoplay="true" 
			indicator-color="rgba(255,255,255, .5)"
			indicator-active-color="#ff372b"
			:interval="3000" 
			:duration="500">
		<swiper-item v-for="(item,index) in swiper" :key="index">
			<view class="item">
				<image :src="item.imageUrl" class="img"></image>
				<view class="tag">
					{{item.typeTitle}}
				</view>
			</view>
		</swiper-item>
	</swiper>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

最后看看本文实现的最后效果：

最后

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