uniapp垂直导航

uniapp实现垂直导航的方法

在uniapp中实现垂直导航可以通过多种方式完成，常见的有使用scroll-view组件、自定义侧边栏或结合第三方UI库。以下是具体实现方案：

使用scroll-view组件

scroll-view组件支持纵向滚动，适合实现垂直导航。基本结构如下：

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

样式需设置容器高度和滚动方向：

.nav-container {
  height: 100vh;
  width: 200rpx;
}
.active {
  color: #007AFF;
  background-color: #f0f0f0;
}

自定义侧边栏布局

结合flex布局实现固定位置的垂直导航栏：

<view class="page-container">
  <view class="sidebar">
    <!-- 导航项内容 -->
  </view>
  <view class="content">
    <!-- 主内容区 -->
  </view>
</view>

对应CSS：

.page-container {
  display: flex;
}
.sidebar {
  width: 200rpx;
  background: #f8f8f8;
}
.content {
  flex: 1;
}

第三方UI库集成

如使用uView UI的u-sidebar组件：

<u-sidebar :list="list" @change="change"></u-sidebar>

JavaScript部分：

export default {
  data() {
    return {
      list: [
        {name: '首页'}, 
        {name: '分类'},
        {name: '我的'}
      ]
    }
  }
}

注意事项

• 导航栏宽度建议使用rpx单位适配不同屏幕
• 高亮状态需通过动态class绑定当前选中项
• 滚动性能优化可设置scroll-with-animation属性
• 复杂交互建议使用专业导航组件如uni-nav-bar

以上方案可根据实际项目需求选择基础实现或扩展功能。