uniapp垂直导航

实现垂直导航的方法

在UniApp中实现垂直导航可以通过多种方式完成，以下介绍几种常见的方法：

使用<scroll-view>组件实现垂直滚动导航

<scroll-view scroll-y style="height: 300px;">
  <view v-for="(item, index) in navList" :key="index" @click="handleNavClick(item)">
    {{ item.title }}
  </view>
</scroll-view>

通过CSS flex布局创建垂直导航栏

<view class="nav-container">
  <view 
    v-for="(item, index) in navList" 
    :key="index" 
    class="nav-item"
    @click="handleNavClick(item)"
  >
    {{ item.title }}
  </view>
</view>

<style>
.nav-container {
  display: flex;
  flex-direction: column;
}
.nav-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}
</style>

结合uni-ui的uni-list组件实现

<uni-list>
  <uni-list-item 
    v-for="(item, index) in navList" 
    :key="index" 
    :title="item.title" 
    clickable
    @click="handleNavClick(item)"
  />
</uni-list>

垂直导航的交互增强

添加活动状态指示

<view 
  v-for="(item, index) in navList" 
  :key="index" 
  :class="['nav-item', activeIndex === index ? 'active' : '']"
  @click="handleNavClick(item, index)"
>
  {{ item.title }}
</view>

<style>
.active {
  color: #007aff;
  background-color: #f0f7ff;
}
</style>

实现分组导航

<view v-for="(group, groupIndex) in groupedNav" :key="groupIndex">
  <view class="group-title">{{ group.title }}</view>
  <view 
    v-for="(item, itemIndex) in group.items" 
    :key="itemIndex"
    class="nav-item"
    @click="handleNavClick(item)"
  >
    {{ item.title }}
  </view>
</view>

性能优化建议

对于长列表导航，建议使用<unicloud-db>组件或虚拟列表技术提升性能：

<unicloud-db collection="nav_items" orderby="sort asc" @load="onNavLoad">
  <template v-slot:default="{data}">
    <view v-for="(item, index) in data" :key="index" @click="handleNavClick(item)">
      {{ item.title }}
    </view>
  </template>
</unicloud-db>

注意事项

• 确保导航容器有明确的高度设置，特别是使用scroll-view时
• 移动端建议为导航项添加足够的点击区域（最小48x48px）
• 考虑使用<navigator>组件实现页面跳转，而非手动处理路由
• 暗黑模式适配可通过CSS变量实现：

.nav-item {
  color: var(--text-color);
  background-color: var(--bg-color);
}