跳到主要内容

快速入门指南

配置底部导航菜单​

以范例 APP 底部的「组件」导航菜单为例，说明如何配置首页底部的导航菜单。

配置菜单节点信息​

打开 pages.json 配置文件，找到 tabBar 节点。如下所示：

"tabBar": {
  "color": "#303133",
  "selectedColor": "#529b2e",
  "borderStyle": "black",
  "backgroundColor": "#f4f4f5",
  "list": [{
   "pagePath": "pages/example/components",
   "iconPath": "static/common/img/nav/component.png",
   "selectedIconPath": "static/common/img/nav/component-selected.png",
   "text": "组件"
   }
   // ...其它菜单配置...
  ]
 }

配置菜单路由信息​

配置路径 pages/example/components 的路由信息。在 pages.json 配置文件中，找到 pages 节点。如下所示：

    "pages": [ 
    //pages数组中第一项表示应用启动页
        {
            "path": "pages/example/components",
            "style": {
                "navigationBarTitleText": "组件"
            }
        }
    // ...其它路由配置...
  ]

该路由配置对应视图文件：pages/example/components.nvue。

新增业务模块页面路由​

参考 pages.json 相关配置文件即可。

提示

更多关于 pages.json 的配置，请查阅 uni-app 相关文档。

下一步​

继续阅读其它章节获取你想要的答案或通过我们的 开发者社区 寻求更多帮助。