逻辑

这些都是需要配置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"}]},

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

运行截图如下：