uniapp - 新建页面与tabBar配置_uniapp tabbar

通过开源项目学习前端代码第一天，目标是创建一个文章模块的页面和底部tab按钮。

一、新建页面

在uni-app项目中，一个页面就是一个符合Vue SFC规范的vue文件。

uni-app中的页面，默认保存在工程根目录下的pages目录下。每次新建页面，都需要在pages.json中的pages列表中配置。

pages.json是页面路由文件，用来对uni-app进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等。

1.新建vue文件

我们在pages文件夹下，创建一个article文件夹，再在article文件夹下创建一个名为article.vue的文件。

使用HBuilderX内置的默认模板生成vue文件后的内容如下

// article.vue文件
<template>
	<!-- 模板组件区：
		 页面元素布局，html标签 -->
</template>

<script>
	<!-- 脚本区
		js代码，业务逻辑处理，接口请求 -->
	export default {
		data() {
			return {
			}
		}
	}
</script>

<style>
	<!-- 样式区
		 页面元素样式：背景色、字体色、圆角渐变等.. --> 
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2.pages.json配置

新建完vue文件后，需要到pages.json中添加对应的对象

{
	"pages": [
		{
			"path": "pages/index/index", //名字叫不叫index无所谓，位置在第一个，就是首页
			"style": {
				"navigationBarTitleText": "首页" //页面标题
			}
		},
		// ...
		// article.vue对应配置 >>>>>>>>
		{
			"path": "pages/article/article",
			"style": {
				"navigationBarTitleText": "文章模块"
			}
		},
	],
	// ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

二、tabBar配置

vue页面创建完毕后，我们需要一个页面入口。我们在底部配置一个文章tab，在pages.json中的tabBar对象中配置，tabBar可设置2~5个tab。

1.pages.json配置

{
	"pages": [
		{
			"path": "pages/index/index", //名字叫不叫index无所谓，位置在第一个，就是首页
			"style": {
				"navigationBarTitleText": "首页" //页面标题
			}
		},
		// ...
		// article.vue对应配置 >>>>>>>>
		{
			"path": "pages/article/article",
			"style": {
				"navigationBarTitleText": "文章模块"
			}
		},
	],
	// ...
	,
	"tabBar": {
     	// tabBar 设置底部 tab 的表现
	    "color": "#909399",
	    "selectedColor": "#2979ff",
		"borderStyle": "white",
	    "backgroundColor": "#ffffff",
	    "list": [{
	        "pagePath": "pages/index/index",
	        "iconPath": "static/index.png",
	        "selectedIconPath": "static/index-selected.png",
	        "text": "首页"
	    }, {
	    	// 为新的article页面配置到底部tab栏
	        "pagePath": "pages/article/article",
	        "iconPath": "static/location.png",
	        "selectedIconPath": "static/location-selected.png",
	        "text": "文章"
	    }, {
	        "pagePath": "pages/center/center",
	        "iconPath": "static/center.png",
	        "selectedIconPath": "static/center-selected.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
39
40
41
42
43
44

此时运行的页面显示如下，我们得到了一个文章底部tab栏和一个空白的页面

我们需要在vue文件中继续补充信息，使空白页面丰富起来，达到我们的目标样式。简单添加一个头部导航栏标题和一行文字。

// article.vue
<template>
	<!-- uview 内置样式 -->
	<view class="u-p-l-10 u-p-r-10">
		<!-- u-navbar导航栏组件，主要用于头部导航 -->
		<u-navbar :is-back="false" title="文章模块" :border-bottom="false">
			
		</u-navbar>
		<view>
			文章列表待更新...
		</view>
	</view>
</template>
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14

最终效果：

三、尾声

本文已跳过nodejs下载安装、npm安装等内容。
建议使用HBuilderX编译器。

参考文章

uni-app官网文档