当前位置：首页 > news >正文

uniapp笔记-底部和首部标签页菜单生成

news 2025/7/2 11:25:01

逻辑

这些都是需要配置pages.json文件。

其中底部需要手动配置tarBar，如：

	"tabBar": {
		"list":[
			{
				"pagePath": "pages/index/index",
				"text": "首页"
			},
			{
				"pagePath": "pages/category/tab1/tab1",
				"text": "分类1"
			}
		]
	},

首部可以通过HBuilder X，快速生成，制动配置，如：

	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path" : "pages/category/tab1/tab1",
			"style" : 
			{
				"navigationBarTitleText" : "分类1"
			}
		}
	],

例子

新建category目录

新建页面：

默认情况下都会在pages.json中注册。

创建完成后修改category/tab2/tab2.vue

将如下：

<template>
	<view>
	</view>
</template>

修改为：

<template>
	<view>
		<text>This is tab2</text>
	</view>
</template>

再回到pages.json，可见已自动注册：

修改titleText，如下代码：

	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path" : "pages/category/tab1/tab1",
			"style" : 
			{
				"navigationBarTitleText" : "分类1"
			}
		},
		{
			"path" : "pages/category/tab2/tab2",
			"style" : 
			{
				"navigationBarTitleText" : "分类2"
			}
		}
	],

这样首部的菜单就配置完成了。

下面说下底部的。

对应的文档如下：

通过官方的示例代码：

"tabBar": {
	"color": "#7A7E83",
	"selectedColor": "#3cc51f",
	"borderStyle": "black",
	"backgroundColor": "#ffffff",
	"list": [{
		"pagePath": "pages/component/index",
		"iconPath": "static/image/icon_component.png",
		"selectedIconPath": "static/image/icon_component_HL.png",
		"text": "组件"
	}, {
		"pagePath": "pages/API/index",
		"iconPath": "static/image/icon_API.png",
		"selectedIconPath": "static/image/icon_API_HL.png",
		"text": "接口"
	}]
}

修改原代码：

	"tabBar": {
		"list":[
			{
				"pagePath": "pages/index/index",
				"text": "首页"
			},
			{
				"pagePath": "pages/category/tab1/tab1",
				"text": "分类1"
			}
		]
	},

为：

	"tabBar": {
		"list":[
			{
				"pagePath": "pages/index/index",
				"text": "首页"
			},
			{
				"pagePath": "pages/category/tab1/tab1",
				"text": "分类1"
			},
			{
				"pagePath": "pages/category/tab2/tab2",
				"text": "分类2"
			}
		]
	},

这样底部的菜单就修改完成了。

运行截图如下：