uni-app 需要一个左侧垂直导航栏插件 相当于垂直版的tabbar

在 uni-app 中实现一个左侧垂直导航栏（相当于垂直版的 tabbar），可以通过自定义组件和页面路由配置来实现。以下是一个简单的实现案例，包括自定义组件和页面路由配置。

1. 创建垂直导航栏组件

首先，在 components 文件夹下创建一个名为 VerticalNav.vue 的组件文件：

<template>
  <scroll-view scroll-y="false" class="vertical-nav">
    <view v-for="(item, index) in navItems" :key="index" class="nav-item" @click="navigateTo(item.path)">
      <text>{{ item.name }}</text>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { name: '首页', path: '/pages/index/index' },
        { name: '新闻', path: '/pages/news/news' },
        { name: '关于', path: '/pages/about/about' }
      ]
    };
  },
  methods: {
    navigateTo(path) {
      uni.navigateTo({
        url: path
      });
    }
  }
};
</script>

<style scoped>
.vertical-nav {
  width: 200rpx;
  height: 100vh;
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
}
.nav-item {
  padding: 20rpx;
  text-align: center;
}
.nav-item:hover {
  background-color: #eee;
}
</style>

2. 配置页面路由

在 pages.json 中配置页面路由，确保导航到的页面存在：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/news/news",
      "style": {
        "navigationBarTitleText": "新闻"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于"
      }
    }
  ]
}

3. 在主页面中使用垂直导航栏组件

在需要显示垂直导航栏的页面中（如 pages/index/index），引入并使用 VerticalNav 组件：

<template>
  <view class="container">
    <VerticalNav />
    <view class="content">
      <!-- 页面内容 -->
    </view>
  </view>
</template>

<script>
import VerticalNav from '@/components/VerticalNav.vue';

export default {
  components: {
    VerticalNav
  }
};
</script>

<style scoped>
.container {
  display: flex;
}
.content {
  flex: 1;
  padding: 20rpx;
  box-sizing: border-box;
}
</style>

以上代码展示了如何在 uni-app 中实现一个左侧垂直导航栏，通过自定义组件和页面路由配置，实现类似垂直版 tabbar 的功能。你可以根据需求进一步优化和扩展这个基础实现。