uniapp页面没有tabbar怎么办

百变鹏仔 4周前 (11-20) #uniapp

文章标签页面

在使用uniapp开发移动应用时，我们经常会遇到需要在页面中添加底部tabbar的需求。然而，有时候我们会发现在使用uniapp开发页面时，底部的tabbar却不显示出来了。这是因为在uniapp中，默认情况下，页面是不包含tabbar的，需要我们手动添加。

那么，如何在UniApp页面中添加TabBar呢？下面我们将一步步介绍。

首先，我们需要在App.vue文件中添加TabBar组件。打开App.vue文件，找到template标签下的代码，添加如下TabBar标签：

<tabbar>  <tabbar-item icon="home" title="首页" path="/pages/index/index"></tabbar-item>  <tabbar-item icon="search" title="搜索" path="/pages/search/search"></tabbar-item>  <tabbar-item icon="cart" title="购物车" path="/pages/cart/cart"></tabbar-item>  <tabbar-item icon="user" title="我的" path="/pages/user/user"></tabbar-item></tabbar>

以上代码中，我们添加了4个TabBar菜单，分别为“首页”、“搜索”、“购物车”和“我的”，并指定了它们对应的页面路径。其中，每个TabBar菜单都由tabbar-item标签来表示，其中包含icon、title和path三个属性，分别表示菜单的图标、标题和对应页面的路径。

接着，我们需要在各个页面中添加页面路径。打开要添加TabBar的页面，比如说首页的index.vue，找到script标签下的export default代码块，添加如下代码：

export default {  onShow() {    uni.setTabBarItem({      index: 0,      text: '首页',      iconPath: '/static/tabBar/home.png',      selectedIconPath: '/static/tabBar/home-active.png'    })  }}

以上代码中，我们使用onShow生命周期函数来设置当前页面的TabBar菜单。其中，setTabBarItem函数用于设置TabBar某个菜单的属性，包括index、text、iconPath和selectedIconPath四个属性。这里我们设置了"首页"菜单的属性，包括菜单的索引、标题、普通状态下的图标和选中状态下的图标。

最后，我们需要在pages.json配置文件中定义各个页面的路径。打开pages.json配置文件，添加如下代码：

{  "pages": [    {      "path": "pages/index/index",      "style": {}    },    {      "path": "pages/search/search",      "style": {}    },    {      "path": "pages/cart/cart",      "style": {}    },    {      "path": "pages/user/user",      "style": {}    }  ],  "tabBar": {    "list": [      {        "pagePath": "pages/index/index",        "text": "首页",        "iconPath": "/static/tabBar/home.png",        "selectedIconPath": "/static/tabBar/home-active.png"      },      {        "pagePath": "pages/search/search",        "text": "搜索",        "iconPath": "/static/tabBar/search.png",        "selectedIconPath": "/static/tabBar/search-active.png"      },      {        "pagePath": "pages/cart/cart",        "text": "购物车",        "iconPath": "/static/tabBar/cart.png",        "selectedIconPath": "/static/tabBar/cart-active.png",        "badge": 0      },      {        "pagePath": "pages/user/user",        "text": "我的",        "iconPath": "/static/tabBar/user.png",        "selectedIconPath": "/static/tabBar/user-active.png"      }    ]  }}

以上代码中，我们定义了四个页面的路径，并在tabBar属性中定义了TabBar菜单的属性，包括页面路径、菜单文本、普通状态下的菜单图标和选中状态下的菜单图标。

到这里，添加TabBar菜单的步骤就完成了。我们可以重新编译UniApp应用，查看效果。如果一切正常，就可以看到页面底部显示了TabBar菜单了。

总的来说，UniApp默认情况下是不包含TabBar菜单的，需要我们手动添加。通过在App.vue文件中添加TabBar组件，各页面中添加页面路径，以及在pages.json配置文件中定义TabBar菜单的属性，就可以很方便地实现TabBar菜单功能了。

文章推荐

uniapp页面没有tabbar怎么办

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项