uniapp不展示tabbar

uniApp（又名Dcloud）是一款基于Vue.js的跨平台应用开发框架，它允许开发者构建一次，多端部署。在uniApp中，TabBar是一个常见的组件，主要用于底部导航栏，用于在子页面之间切换。TabBar通常包含若干个固定的标签项，每个标签对应着一个子页面或者功能模块。 在uniApp项目中，设置子页面TabBar的步骤如下： 1. **配置TabBar**: 在`pages.json`文件中为需要展示的子页面配置对应的标签。例如： ```json { "pages": [ { "path": "pages/index/index", "window": true, "tabBar": { "text": "首页", "iconPath": "path/to/home-icon.png", "selectedIconPath": "path/to/home-selected-icon.png" } }, { "path": "pages/detail/detail", "tabBar": { "text": "详情页", "iconPath": "path/to/detail-icon.png", "selectedIconPath": "path/to/detail-selected-icon.png" } } ] } ``` 2. **引用TabBar组件**: 在每个子页面的`<template>`标签内，使用`<uni-tabbar>`组件来显示底部导航栏。 ```html <template> <view> <!-- 子页面内容 --> <uni-tabbar :current="currentIndex" @change="tabBarChange"> <!-- TabBar配置项列表 --> <uni-tabbar-item icon-type="custom" :active-color="#00BB86" :disabled-color="#ccc" v-for="(item, index) in tabBarItems" :key="index"> <view>{{ item.text }}</view> </uni-tabbar-item> </uni-tabbar> </view> </template> <script> export default { data() { return { currentIndex: 0, tabBarItems: [ // 根据配置的pages.json填充 ] }; }, methods: { tabBarChange(index) { this.currentIndex = index; } } }; </script> ```

### 如何在 UniApp 项目中使用 `van-tabbar` 组件 #### 安装 Vant Weapp 组件库 为了能够在 UniApp 中使用 `van-tabbar`，首先需要安装 Vant Weapp 组件库。可以通过 npm 或者 yarn 来完成这一步骤。 ```bash npm install @vant/weapp -D --production ``` 或者 ```bash yarn add @vant/weapp -D ``` #### 修改 `pages.json` 文件配置 TabBar 为了让应用程序支持底部标签栏，在项目的根目录下找到并编辑 `pages.json` 文件来设置全局的 tabBar 属性[^3]： ```json { "globalStyle": { ... }, "tabBar": { "color": "#000", "selectedColor": "#1aad19", "borderStyle": "black", "backgroundColor": "#fff", "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" } ] } } ``` #### 使用 `van-tabbar-item` 组件 接下来可以在对应的页面文件里引入 `van-tabbar-item` 并编写相应的代码片段以实现具体的功能逻辑[^1]: 对于每一个要显示为 tab 的页面（比如上面提到的 `index.vue` 和 `logs.vue`），都需要在其 `<template>` 标签内加入如下所示的内容: ```html <template> <!-- 其他 HTML 结构 --> <van-tabbar v-model="active"> <van-tabbar-item icon="home-o">首页</van-tabbar-item> <van-tabbar-item icon="logistics-o">物流</van-tabbar-item> </van-tabbar> <!-- 更多HTML结构 --> </template> <script> import '@vant/weapp/dist/style.css'; export default { data() { return { active: 0, }; }, }; </script> ``` 上述例子展示了如何通过绑定属性 `v-model` 控制当前激活项的状态，并利用子组件 `van-tabbar-item` 渲染各个选项卡的文字描述及其图标。 #### 初始化 App 设置 最后不要忘记调整 `App.vue` 文件中的启动函数以便更好地适配不同平台的需求[^4]： ```javascript onLaunch: function () { console.log('App Launch'); uni.getSystemInfo({ success(res) { // 获取状态栏高度等信息... // 如果是在微信小程序环境下执行特定操作 #ifdef MP-WEIXIN const menuRect = wx.getMenuButtonBoundingClientRect(); this.globalData.StatusBarHeight = res.statusBarHeight; this.globalData.CustomBarHeight = menuRect.bottom - res.statusBarHeight + (menuRect.top === 4 ? 0 : 8); #endif // 将这些值存储到 globalData 或其他合适的地方供后续访问 }.bind(this), }); }, ``` 这段脚本会根据运行环境自动计算出顶部安全区域的高度，从而确保自定义导航栏不会被遮挡。