逻辑
这些都是需要配置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"}]},
这样底部的菜单就修改完成了。
运行截图如下: