van-tabbar

VanTabbar 是一个 Vue.js 的标签栏组件，用于创建多个选项卡并在其中切换。它提供了丰富的功能，例如可定制的样式、拖拽排序、右键菜单和关闭选项卡等。您可以在 Vue.js 项目中使用 VanTabbar 来创建一个易于导航和管理的选项卡界面。它可以帮助您组织大量的内容，并提供良好的用户体验。

相关问题

uniapp van-tabbar

### 如何在 UniApp 项目中使用 `van-tabbar` 组件

#### 安装 Vant Weapp 组件库
为了能够在 UniApp 中使用 `van-tabbar`，首先需要安装 Vant Weapp 组件库。可以通过 npm 或者 yarn 来完成这一步骤。

npm install @vant/weapp -D --production

或者

yarn add @vant/weapp -D

#### 修改 `pages.json` 文件配置 TabBar
为了让应用程序支持底部标签栏，在项目的根目录下找到并编辑 `pages.json` 文件来设置全局的 tabBar 属性[^3]：

{
  "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>` 标签内加入如下所示的内容:

<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]：

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),
  });
},

这段脚本会根据运行环境自动计算出顶部安全区域的高度，从而确保自定义导航栏不会被遮挡。

van-tabbar路由配置

Van TabBar 是 Vue 路由管理组件库 Vant 的一个组件，用于实现底部导航栏，常用于移动应用中展示不同的页面选项。在 Van TabBar 中配置路由主要是为了动态绑定每个 tab 到对应的路由。

以下是基本的配置步骤：

1. 安装依赖：首先确保已经安装了 Vue Router 和 Vant UI。如果还没安装，可以在项目目录下运行：

   npm install vue-router vant

2. 引入组件和路由配置：在你的主入口文件（如 main.js 或者 vite.config.ts）里引入 Vue Router，并初始化它：

   import { createRouter, createWebHistory } from 'vue-router';
   import { Vant } from 'vant';

   Vant.use();

   const routes = [
     // 你的路由配置列表，例如：
     {
       path: '/home',
       component: () => import('@/views/Home.vue'),
       name: 'Home'
     },
     {
       path: '/settings',
       component: () => import('@/views/Settings.vue'),
       name: 'Settings'
     }
   ];

   const router = createRouter({
     history: createWebHistory(),
     routes
   });

3. 配置 Van TabBar：在你的 App 组件或其他容器组件中使用 Van TabBar，并设置路由数据：

   <van-tabs :routes="router.routes" @tab-click="handleTabClick"></van-tabs>

   methods: {
     handleTabClick(tab) {
       this.$router.push(tab.path);
     }
   }

这样，当你点击 tab 时，会跳转到相应的路由。