uniapp二级导航栏

实现二级导航栏的基本方法

在UniApp中实现二级导航栏，可以通过<scroll-view>结合自定义样式或使用官方组件完成。以下是一个基础实现示例：

<template>
  <view>
    <!-- 一级导航 -->
    <scroll-view scroll-x class="nav-primary">
      <view 
        v-for="(item, index) in primaryList" 
        :key="index"
        :class="['primary-item', currentPrimary === index ? 'active' : '']"
        @click="switchPrimary(index)"
      >
        {{item.name}}
      </view>
    </scroll-view>

    <!-- 二级导航 -->
    <scroll-view scroll-x class="nav-secondary">
      <view 
        v-for="(subItem, subIndex) in secondaryList" 
        :key="subIndex"
        :class="['secondary-item', currentSecondary === subIndex ? 'active' : '']"
        @click="switchSecondary(subIndex)"
      >
        {{subItem.name}}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      primaryList: [
        {name: '分类1', subItems: [{name: '子类1'}, {name: '子类2'}]},
        {name: '分类2', subItems: [{name: '子类3'}, {name: '子类4'}]}
      ],
      currentPrimary: 0,
      currentSecondary: 0,
      secondaryList: []
    }
  },
  created() {
    this.secondaryList = this.primaryList[0].subItems
  },
  methods: {
    switchPrimary(index) {
      this.currentPrimary = index
      this.secondaryList = this.primaryList[index].subItems
      this.currentSecondary = 0
    },
    switchSecondary(index) {
      this.currentSecondary = index
    }
  }
}
</script>

<style>
.nav-primary, .nav-secondary {
  white-space: nowrap;
  background-color: #f8f8f8;
}
.primary-item, .secondary-item {
  display: inline-block;
  padding: 10px 15px;
}
.active {
  color: #007AFF;
  border-bottom: 2px solid #007AFF;
}
</style>

使用UI组件库优化

推荐使用uni-ui或第三方UI库简化开发：

1. 安装uni-ui：

   npm install @dcloudio/uni-ui

2. 使用分段器组件：

   

   <template>
   <view>
    <uni-segmented-control 
      :current="currentPrimary" 
      :values="primaryItems" 
      @clickItem="onClickPrimary"
    />
    <uni-segmented-control 
      :current="currentSecondary" 
      :values="secondaryItems" 
      @clickItem="onClickSecondary"
    />
   </view>
   </template>

动态加载二级导航数据

通过接口动态获取导航数据更符合实际场景：

async loadNavData() {
  const res = await uni.request({
    url: 'https://api.example.com/navigation'
  })
  this.primaryList = res.data.primary
  this.secondaryList = this.primaryList[0].children
}

样式优化技巧

添加滑动动画效果：

.nav-secondary {
  transition: all 0.3s ease;
}
.secondary-item {
  transition: color 0.2s;
}

注意事项

• 在小程序端需注意scroll-view的横向滚动需设置enable-flex属性（微信小程序）
• H5端可能需要额外处理滚动条样式隐藏
• 考虑添加加载状态处理异步数据场景
• 高亮状态建议使用CSS变量实现主题色统一管理